@charset "UTF-8";

.main-top { width: 100%; height: 40px; line-height: 40px; background-color: #171a2b; }

.main-top .container { display: flex; justify-content: space-between; }

.main-top .container .logined { flex: 1; display: flex; align-items: center; margin-right: 10px; }

.main-top .container .logined * { margin-right: 5px; }

.main-top .container .logined .btn { display: inline-block; padding: 0 5px; margin-left: 5px; color: #fff; height: 24px; line-height: 24px; }

.main-top .container .top-login { flex: 1; display: flex; align-items: center; height: 40px; }

.main-top .container .top-login form { display: flex; flex-direction: row; align-items: center; }

.main-top .container .top-login form > * + * { margin-left: 10px; }

.main-top .container .top-login input { width: 120px; height: 24px; line-height: 24px; padding: 0 10px; color: #fff; background: #0b0d19; border: none; }

.main-top .container .top-login input::placeholder { color: #fffbfd; }

.main-top .container .top-login .btn { min-width: 60px; padding: 0 10px; height: 24px; line-height: 24px; color: #fff; }

.main-top .container .top-login .btn.bg-green { background-image: linear-gradient(to right, #2aa146, #13d06c); }

.main-top .container .top-login .btn.bg-gold { background-image: linear-gradient(to right, #fbedc2, #c0a369); color: #000; }

.main-top .container .top-login .btn.usercenter-btn { display: flex; align-items: center; position: relative; padding-right: 25px; }

.main-top .container .top-login .btn.usercenter-btn i { background: url(../images/sprite.png) no-repeat 0 0; background-position: -137px -342px; width: 10px; height: 6px; position: absolute; right: 5px; top: 9px; transform: rotate(180deg); transition: all 0.1s linear; }

.main-top .container .top-login .btn.usercenter-btn:hover i { transform: rotate(0deg); transition: all 0.1s linear; }

.main-top .container .top-login .btn.usercenter-btn:hover ul { display: block; }

.main-top .container .top-login .btn.usercenter-btn ul { margin-right: 0; display: none; position: absolute; top: 36px; left: 0; right: 0; background: #1c1f31; text-align: center; line-height: 40px; z-index: 1300; box-shadow: 0 5px 7px 1px rgba(0, 0, 0, 0.5); }

.main-top .container .top-login .btn.usercenter-btn ul::before { content: ""; position: absolute; top: -12px; bottom: 100%; left: 0; right: 0; }

.main-top .container .top-login .btn.usercenter-btn ul li, .main-top .container .top-login .btn.usercenter-btn ul a { margin-right: 0; font-size: 12px; display: block; }

.main-top .container .top-login .btn.usercenter-btn ul li:hover, .main-top .container .top-login .btn.usercenter-btn ul a:hover { color: #db1d40; }

.main-top .container .top-nav { display: flex; align-items: center; }

.main-top .container .top-nav a { font-size: 12px; color: #fffbfd; position: relative; }

.main-top .container .top-nav a + a { margin-left: 15px; padding-left: 15px; }

.main-top .container .top-nav a + a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 13px; background-color: #6d717c; border-left: 1px solid #393c49; }

.main-top .container .top-nav a.cd-burn { position: relative; }

.main-top .container .top-nav a.cd-burn i { font-style: normal; position: absolute; margin-top: 5px; right: 0; transform: translateX(50%); min-width: 18px; height: 18px; line-height: 18px; text-align: center; color: #fff; background-color: #d3320a; border-radius: 9px; display: none; }

.main-middle .logo-search { height: 92px; display: flex; align-items: center; justify-content: space-between; }

.main-middle .logo-search form { display: flex; flex-direction: row; align-items: center; }

.main-middle .logo-search form input { border: 1px solid #2a2d40; color: #fff; background: none; padding: 0 10px; width: 420px; height: 36px; }

.main-middle .logo-search form input::placeholder { color: #fffbfd; }

.main-middle .logo-search form .btn { margin-left: 10px; height: 36px; padding: 0 15px; background-color: #db1d40; color: #fff; }

.main-middle .layui-carousel-ind { top: -20px; }

.main-middle .layui-carousel-ind ul { background: rgba(252, 254, 252, 0.3); padding: 0; height: 6px; border-radius: 3px; }

.main-middle .layui-carousel-ind ul li { background: none; margin: 0; width: 30px; height: 6px; }

.main-middle .layui-carousel-ind ul li.layui-this { background-color: #fff; border-radius: 3px; }

.main-middle .main-list { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 20px; }

.main-middle .main-list .left { flex: 1; background-color: #171a2b; }

.main-middle .main-list .right { margin-left: 10px; width: 400px; background-color: #171a2b; }

.main-middle .main-list .right .main-header { position: relative; }

.main-middle .main-list .right .main-header.no-border { border-bottom-width: 0; }

.main-middle .main-list .right .main-header .title { border-left-width: 0px; padding-left: 30px; }

.main-middle .main-list .right .main-header .title span { color: #fffbfd; font-weight: normal; margin-right: 15px; }

.main-middle .main-list .right .main-header .more { background: url("../images/more.png") no-repeat right center; padding-right: 20px; color: #fffbfd; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); }

.main-middle .main-list .right ul { padding: 20px 30px; }

.main-middle .main-list .right ul li { line-height: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fffbfd; }

.main-middle .main-list .right ul li a { color: inherit; }

.main-middle .main-list .right ul li:hover { color: #fff; }

.main-middle .main-list .right ul.img-list { padding: 0 30px; }

.main-middle .main-list .right ul.img-list li { line-height: 18px; text-align: center; float: left; width: 100px; }

.main-middle .main-list .right ul.img-list li:not(:nth-child(3n + 1)) { margin-left: 20px; }

.main-middle .main-list .right ul.img-list li:not(:nth-child(-n + 3)) { margin-top: 10px; }

.main-middle .main-list .right ul.img-list li img { width: 100px; height: 90px; }

.main-middle .main-list .right ul.img-list li p { color: #ffffff; margin-top: 8px; }

.main-middle .main-list .right ul.img-list li span { color: #fffbfd; font-size: 12px; }

.main-middle .main-list .right ul.tag-list li { float: left; width: 100px; height: 40px; line-height: 40px; text-align: center; background-color: #1c1f31; color: #fffbfd; cursor: pointer; }

.main-middle .main-list .right ul.tag-list li a { color: inherit; }

.main-middle .main-list .right ul.tag-list li:not(:nth-child(3n + 1)) { margin-left: 20px; }

.main-middle .main-list .right ul.tag-list li:not(:nth-child(-n + 3)) { margin-top: 20px; }

.main-middle .main-list .right ul.tag-list li:hover { color: #fff; }

.main-middle .main-list .right .notice-hot { width: 100%; height: 50px; display: flex; align-items: center; padding-left: 30px; color: #db1d40; background-color: #1c1f31; }

.main-middle .main-list .main-header { height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #212434; padding-right: 20px; }

.main-middle .main-list .main-header .title { font-size: 16px; font-weight: bolder; color: #fff; border-left: 4px solid #db1d40; padding-left: 15px; }

.main-middle .main-list .main-header .btns { flex: 1; margin-left: 20px; position: relative; width: auto; height: 100%; overflow-x: scroll; overflow-y: hidden; overflow: auto; display: flex; justify-content: flex-end; }

.main-middle .main-list .main-header .btns::-webkit-scrollbar { width: 0; height: 0; }

.main-middle .main-list .main-header .btns::-webkit-scrollbar-thumb { background-color: #383d5b; border-radius: 0.0667rem; }

.main-middle .main-list .main-header .btns .scroll { overflow-x: scroll; position: absolute; overflow: auto; right: 0; top: 0; bottom: 0; width: auto; display: flex; align-items: center; height: 100%; text-overflow: ellipsis; white-space: nowrap; }

.main-middle .main-list .main-header .btns .scroll::-webkit-scrollbar { width: 0; height: 0px; }

.main-middle .main-list .main-header .btns .scroll::-webkit-scrollbar-thumb { background-color: #383d5b; border-radius: 5.0025px; }

.main-middle .main-list .main-header .btns .btn { padding: 0 10px; height: 28px; line-height: 28px; color: #fff; background-color: #1c1f31; }

.main-middle .main-list .main-header .btns .btn + .btn { margin-left: 10px; }

.main-middle .main-list .main-header .btns .btn.active { background-color: #db1d40; }

.main-middle .main-list .list-body { padding: 20px; display: none; }

.main-middle .main-list .list-body:nth-child(2) { display: block; }

.main-middle .main-list .list-body input[type="checkbox"] { margin-right: 10px; }

.main-middle .main-list .list-body li { float: left; width: 415px; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fffbfd; }

.main-middle .main-list .list-body li:nth-child(4n + 1), .main-middle .main-list .list-body li:nth-child(4n + 2) { background-color: #181b2e; }

.main-middle .main-list .list-body li:nth-child(even) { float: right; }

.main-middle .main-list .list-body li:hover { color: #fff; cursor: pointer; }

.main-middle .main-list .list-body li:hover .icon-down { background: url("../images/download-red.png") no-repeat center center; }

.main-middle .main-list .list-body li > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }

.main-middle .main-list .list-body li > div a { color: inherit; }

.main-middle .main-list .list-body li .icon-down { background: url("../images/download.png") no-repeat center center; display: inline-block; width: 12px; height: 14px; }

.main-middle .main-list .list-body .all-checkbox { width: 100%; height: 50px; background-color: #1c1f31; color: #fffbfd; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }

.main-middle .main-list .list-body .all-checkbox .layui-form-checkbox { display: flex; align-items: center; }

.main-middle .main-list .list-body .all-checkbox .layui-form-checkbox span { color: #fffbfd; }

.main-middle .main-list .list-body .all-checkbox .layui-form-checkbox .layui-icon { top: 2px; }

.main-middle .main-list .list-body .all-checkbox .btns { display: flex; align-items: center; }

.main-middle .main-list .list-body .all-checkbox .btns .btn { padding: 0 10px; border: 1px solid #fffbfd; color: #fffbfd; height: 26px; }

.main-middle .main-list .list-body .all-checkbox .btns .btn + .btn { margin-left: 10px; }

.main-middle .main-list .list-body .all-checkbox .btns .btn .icon-play { display: inline-block; width: 9px; height: 12px; margin-right: 5px; background: url("../images/play.png") no-repeat center; }

.player { height: 100px; position: fixed; bottom: 0; left: 0; right: 0; background: #171a2b; box-shadow: 0 -6px 10px 0 #000; display: flex; align-items: center; transition: all ease-in-out 0.5s; z-index: 400; }

.player.hide { bottom: -100px; transition: all ease-in-out 0.5s; box-shadow: none; }

.player .player-close { width: 66px; height: 22px; position: absolute; right: 90px; background: url("../images/lock-bg.png") no-repeat center; top: -22px; display: flex; align-items: flex-end; justify-content: center; }

.player .player-close i { cursor: pointer; display: inline-block; width: 10px; height: 13px; background: url("../images/unlock.png") no-repeat center; }

.player .player-close i.lock { background: url("../images/lock.png") no-repeat center; }

.player .container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

.player .container .control-btns { width: 140px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

.player .container .player-middle { padding: 0 30px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }

.player .container .player-middle .progress { width: 100%; height: 6px; background-color: #1c1f31; border-radius: 3px; position: relative; }

.player .container .player-middle .progress span { position: absolute; left: 0; top: 0; height: 6px; border-radius: 3px; background-image: linear-gradient(to right, #15d7c4, #90d14e); }

.player .container .player-middle .progress span i { cursor: pointer; display: block; position: absolute; right: 0; top: 50% !important; transform: translate(50%, -50%); width: 22px; height: 23px; background: url("../images/dian.png") no-repeat center; }

.player .container .music-title { width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

.player .container .music-title .player-l { background: url("../images/music.png") no-repeat left center; padding-left: 25px; min-height: 19px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; flex: 1; }

.player .container .music-title .player-l i { display: none; }

.player .container .music-title .player-r { display: flex; align-items: center; }

.player .container .music-title .player-r i { cursor: pointer; display: inline-block; width: 18px; height: 16px; margin: 0 8px; }

.player .container .music-title .player-r .icon-mode.random { background: url("../images/random.png") no-repeat center; }

.player .container .music-title .player-r .icon-mode.random:hover { background: url("../images/random-on.png") no-repeat center; }

.player .container .music-title .player-r .icon-mode.loop { background: url("../images/loop.png") no-repeat center; }

.player .container .music-title .player-r .icon-mode.loop:hover { background: url("../images/loop-on.png") no-repeat center; }

.player .container .music-title .player-r .icon-mode.single-loop { background: url("../images/single-loop.png") no-repeat center; }

.player .container .music-title .player-r .icon-mode.single-loop:hover { background: url("../images/single-loop-on.png") no-repeat center; }

.player .container .music-title .player-r .icon-voice { cursor: pointer; display: inline-block; width: 18px; height: 16px; margin: 0 8px; background: url("../images/voice.png") no-repeat center; position: relative; }

.player .container .music-title .player-r .icon-voice:hover { background: url("../images/voice-on.png") no-repeat center; }

.player .container .music-title .player-r .icon-voice .voice-press { display: none; position: absolute; left: 50%; top: -44px; height: 100px; transform: translate(-50%, -100%); width: 6px; z-index: 300; }

.player .container .music-title .player-r .icon-voice .voice-press::before { content: ""; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 40px; height: 130px; background-color: rgba(28, 31, 49, 0.9); box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); }

.player .container .music-title .player-r .icon-voice .voice-press:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #0b0d19; border-radius: 3px; }

.player .container .music-title .player-r .icon-voice .voice-press span { border-radius: 3px; margin-left: 0; position: absolute; left: 0; width: 6px; height: 100%; bottom: 0; background-color: #db1d40; z-index: 301; }

.player .container .music-title .player-r .icon-voice .voice-press span::after { content: attr(data-content); position: absolute; top: 0; right: 0; transform: translate(130%, -50%); color: #ffffff; }

.player .container .music-title .player-r span { color: #fffbfd; margin-left: 10px; }

.player .container .music-title .player-r span b { font-weight: normal; }

.player .container .music-title .player-r span b.cur-time { color: #fff; }

.player .container .player-right { width: 180px; display: flex; align-items: center; justify-content: space-between; }

.player .container .player-right .btn { width: 80px; height: 40px; border: 1px solid #40434d; box-sizing: border-box; color: #fffbfd; }

.player .container .player-right .btn i { display: inline-block; width: 19px; height: 18px; margin-right: 5px; }

.player .container .player-right .btn i.icon-fabulous { background: url("../images/fabulous.png") no-repeat center; }

.player .container .player-right .btn i.icon-download { background: url("../images/download.png") no-repeat center; }

.player .container .player-right .btn i.icon-close { background: url("../images/close.png") no-repeat center; }

.middle-main { margin-top: 10px; padding: 20px; background-color: #171a2b; }

.middle-main.no-bg { background-color: transparent; }

.middle-main.no-pd { padding: 0; display: flex; flex-direction: row; justify-content: space-between; }

.middle-main__left { flex: 1; display: flex; flex-direction: column; padding: 20px; width: calc(100% - 410px); background-color: #171a2b; }

.middle-main__right { margin-left: 10px; width: 400px; background-color: #171a2b; }

.middle-main .crumbs { margin-bottom: 20px; }

.middle-main .crumbs::after { content: ""; clear: both; display: table; }

.middle-main .crumbs > div { display: inline-block; }

.middle-main .crumbs h3 { float: right; color: #db1d40; }

.middle-main .introduction { line-height: 28px; background: #1c1f31; padding: 15px 20px; margin-bottom: 30px; }

.middle-main .introduction h3 { color: #fd8645; }

.middle-main .introduction .layui-form .layui-form-item { margin-top: 20px; display: flex; align-items: center; }

.middle-main .introduction .layui-form .layui-form-item label { margin-right: 20px; width: 56px; display: inline-block; }

.middle-main .introduction .layui-form .layui-form-item > .layui-input-inline { flex: 1; display: flex; align-items: center; }

.middle-main .introduction .layui-form .layui-form-item > .layui-input-inline + .layui-input-inline { margin-left: 40px; }

.middle-main .introduction .layui-form .layui-form-item .layui-form-select, .middle-main .introduction .layui-form .layui-form-item .layui-form-input { flex: 1; }

.middle-main .introduction .layui-form .layui-form-item .layui-form-input { position: relative; }

.middle-main .introduction .layui-form .layui-form-item .layui-form-input .layui-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #fff; cursor: pointer; }

.middle-main .introduction .layui-form .layui-form-item .layui-input { background-color: #0b0d19; border-color: #0b0d19; color: #fff; }

.middle-main .introduction .layui-form .layui-form-item .layui-input:hover, .middle-main .introduction .layui-form .layui-form-item .layui-input:focus { border-color: #0b0d19 !important; }

.middle-main .hot-srearch { line-height: 28px; background: #1c1f31; padding: 15px 20px; }

.middle-main .hot-srearch a { margin-right: 10px; }

.middle-main .main-title { font-size: 16px; line-height: 28px; font-weight: bolder; color: #fff; position: relative; padding-left: 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }

.middle-main .main-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; background-color: #db1d40; }

.middle-main .main-title + .main-title { border-left: 0; padding-left: 0; }

.middle-main .main-title.search-title .search-title__end { font-weight: normal; font-size: 14px; color: #fffbfd; }

.middle-main .main-title .btns { display: flex; justify-content: flex-end; }

.middle-main .main-title .btns .btn + .btn { margin-left: 10px; }

.middle-main .main-title .btn, .middle-main .main-title .swiper-slide { cursor: pointer; width: auto; padding: 0 10px; height: 28px; line-height: 28px; font-size: 14px; font-weight: normal; color: #fff; background-color: #1c1f31; }

.middle-main .main-title .btn + div, .middle-main .main-title .swiper-slide + div { margin-left: 10px; }

.middle-main .main-title .btn.active, .middle-main .main-title .swiper-slide.active { background-color: #db1d40; }

.middle-main .main-title .swiper-container { margin-left: 0; margin-right: 0; width: 100%; }

.middle-main .main-types { padding-bottom: 10px; }

.middle-main .main-types .type-item { padding-left: 20px; }

.middle-main .main-types .type-item:after { content: ""; clear: both; display: table; }

.middle-main .main-types .type-item span { margin-right: 25px; color: #fff; float: left; margin-bottom: 20px; }

.middle-main .main-types .type-item a { margin-bottom: 20px; margin-right: 15px; padding: 0 15px; height: 24px; line-height: 24px; text-align: center; float: left; }

.middle-main .main-types .type-item a.selected { background-color: #db1d40; color: #fff; }

.middle-main.list-page .ul-list-header { position: relative; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fffbfd; }

.middle-main.list-page .ul-list-header:after { content: ""; position: absolute; left: -20px; right: -20px; top: 0; height: 1px; background: #212434; }

.middle-main.list-page .ul-list-header span { width: 110px; text-align: center; }

.middle-main.list-page .ul-list-header span:nth-child(1) { text-align: left; }

.middle-main.list-page .ul-list-header span:nth-child(2) { text-align: left; flex: 1; }

.middle-main.list-page .ul-list-header span:last-child { width: 50px; }

.middle-main.list-page .ul-list-header + ul li { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fffbfd; }

.middle-main.list-page .ul-list-header + ul li:nth-child(odd) { background-color: #181b2e; }

.middle-main.list-page .ul-list-header + ul li:hover { color: #fff; cursor: pointer; }

.middle-main.list-page .ul-list-header + ul li:hover a { color: inherit; }

.middle-main.list-page .ul-list-header + ul li > a { flex: 1; width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 50px; }

.middle-main.list-page .ul-list-header + ul li > span { width: 110px; height: 100%; display: flex; align-items: center; justify-content: center; }

.middle-main.list-page .ul-list-header + ul li > span a { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.middle-main.list-page .ul-list-header + ul li > span a:hover { color: #fff; }

.middle-main.list-page .ul-list-header + ul li > span .stop { margin-right: 10px; }

.middle-main.list-page .ul-list-header + ul li > span .download { margin: 0 auto; }

.middle-main.list-page .ul-list-header + ul li > span:nth-child(1) { justify-content: flex-start; }

.middle-main.list-page .ul-list-header + ul li > span:nth-child(2) { text-align: left; flex: 1; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.middle-main.list-page .ul-list-header + ul li > span:nth-child(2) .stop { vertical-align: top; }

.middle-main.list-page .ul-list-header + ul li > span:last-child { width: 50px; }

.middle-main.list-page .ul-list-header + ul.noicon li > span a { max-width: 100%; }

.middle-main.list-page .ul-list-footer { position: relative; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fffbfd; background-color: #1c1f31; margin-bottom: 20px; box-shadow: 0 0 0.1333rem 0.0667rem #1a1f36; }

.middle-main.list-page .ul-list-footer label { color: #fff; }

.middle-main.list-page .ul-list-footer .btns { display: flex; flex-direction: row; align-items: center; justify-content: flex; }

.middle-main.list-page .ul-list-footer .btns .btn { padding: 0 10px; border: 1px solid #fffbfd; color: #fffbfd; height: 26px; }

.middle-main.list-page .ul-list-footer .btns .btn + .btn { margin-left: 10px; }

.middle-main.list-page .ul-list-footer .btns .btn .icon-play { display: inline-block; width: 9px; height: 12px; margin-right: 5px; background: url(../images/play.png) no-repeat center; }

.middle-main .layui-table-view { border-width: 0; position: relative; display: table; width: 100%; }

.middle-main .layui-table-view::before { content: ""; position: absolute; left: -20px; right: -20px; top: 0; height: 1px; background-color: #212434; }

.middle-main .layui-table-view .layui-table-cell { padding: 0 20px; }

.middle-main .layui-table-view .layui-table-cell .layui-form-checkbox[lay-skin="primary"] { padding-left: 10px; }

.middle-main .layui-table-view .layui-table-tool { display: table-row-group; height: 50px; line-height: 50px; background-color: #1c1f31; }

.middle-main .layui-table-view .layui-table-tool .layui-table-tool-temp { padding: 0 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }

.middle-main .layui-table-view .layui-table-tool .layui-table-tool-temp .btns { display: flex; flex-direction: row; align-items: center; justify-content: flex; }

.middle-main .layui-table-view .layui-table-tool .layui-table-tool-temp .btns .btn { padding: 0 10px; border: 1px solid #fffbfd; color: #fffbfd; height: 26px; }

.middle-main .layui-table-view .layui-table-tool .layui-table-tool-temp .btns .btn + .btn { margin-left: 10px; }

.middle-main .layui-table-view .layui-table-tool .layui-table-tool-temp .btns .btn .icon-play { display: inline-block; width: 9px; height: 12px; margin-right: 5px; background: url(../images/play.png) no-repeat center; }

.middle-main .layui-table-view .layui-table-box { display: table-header-group; }

.middle-main .layui-table-view .layui-table-page { display: table-footer-group; height: auto; border-width: 0; }

.middle-main .layui-table-view .layui-table-page > div { height: auto; }

.middle-main .layui-table-view .layui-table-header { background: none; border: none; }

.middle-main .layui-table-view .layui-table { width: 100%; background: none; color: #fffbfd; }

.middle-main .layui-table-view .layui-table tr { background: none; }

.middle-main .layui-table-view .layui-table tr th, .middle-main .layui-table-view .layui-table tr td { border: none; padding: 10px 0; }

.middle-main .layui-table-view .layui-table tr th .song-name, .middle-main .layui-table-view .layui-table tr td .song-name { display: flex; align-items: center; }

.middle-main .layui-table-view .layui-table tr th .song-name .icon-img.stop, .middle-main .layui-table-view .layui-table tr td .song-name .icon-img.stop { flex: none; display: inline-block; width: 20px; height: 20px; margin-right: 8px; }

.middle-main .layui-table-view .layui-table tr th .song-name input + .icon-stop, .middle-main .layui-table-view .layui-table tr td .song-name input + .icon-stop { margin-left: 10px; }

.middle-main .layui-table-view .layui-table tr th .song-name a, .middle-main .layui-table-view .layui-table tr td .song-name a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 28px; position: relative; }

.middle-main .layui-table-view .layui-table tr th .song-name a .icon-img.hot, .middle-main .layui-table-view .layui-table tr td .song-name a .icon-img.hot { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-left: 10px; }

.middle-main .layui-table-view .layui-table tr th .layui-table-link .icon-down, .middle-main .layui-table-view .layui-table tr td .layui-table-link .icon-down { background: url("../images/download.png") no-repeat center center; display: inline-block; width: 12px; height: 14px; cursor: pointer; }

.middle-main .layui-table-view .layui-table tr th .layui-table-link:hover .icon-down, .middle-main .layui-table-view .layui-table tr td .layui-table-link:hover .icon-down { background: url("../images/download-red.png") no-repeat center center; }

.middle-main .layui-table-view .layui-table tbody tr:nth-child(odd) { background-color: #1c1f31; }

.middle-main .layui-table-view .layui-table-body .layui-table tr:nth-child(odd) { background-color: #1c1f31; }

.middle-main .layui-table-view .layui-table-body .layui-table tr:hover td { color: #fff; }

.middle-main .layui-table-view .layui-table-body .layui-table tr:hover td a { color: inherit; }

.middle-main .layui-table-view .layui-table-body .layui-table tr:hover td .icon-down { background: url("../images/download-red.png") no-repeat center center; }

.middle-main .img-list { position: relative; padding-left: 30px; margin-left: -20px; margin-right: -20px; padding-top: 20px; border-top: 1px solid #212434; border-bottom: 1px solid #212434; display: none; }

.middle-main .img-list:nth-child(1) { display: block; }

.middle-main .img-list li { float: left; width: 178px; height: 240px; text-align: center; margin-bottom: 20px; margin-right: 33px; }

.middle-main .img-list li .img { width: 178px; height: 178px; overflow: hidden; }

.middle-main .img-list li .img img { width: auto; height: 178px; }

.middle-main .img-list li h3 { color: #fff; font-size: 16px; margin-top: 10px; }

.middle-main .img-list li p { line-height: 28px; }

.middle-main .album-detail { background-color: #1c1f31; margin-bottom: 40px; display: flex; flex-direction: row; }

.middle-main .album-detail .img { width: 352px; background: url("../images/album-img-bg.png") no-repeat right 0; padding-right: 136px; }

.middle-main .album-detail .img .img-box { width: 216px; height: 216px; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5); overflow: hidden; }

.middle-main .album-detail .img .img-box img { width: auto; height: 100%; }

.middle-main .album-detail .detail-right { flex: 1; padding: 40px; max-width: 800px; }

.middle-main .album-detail .detail-right .detail-item { float: left; min-width: 50%; line-height: 28px; color: #fff; display: flex; align-items: flex-start; }

.middle-main .album-detail .detail-right .detail-item img { margin-right: 8px; margin-top: 5px; }

.middle-main .album-detail .detail-right .detail-item span { color: #fffbfd; min-width: 60px; }

.middle-main .player-box { height: 430px; padding: 40px 30px; background: url("../images/player-bg.png") no-repeat center top; background-size: cover; display: flex; margin-bottom: 30px; }

.middle-main .player-box .player-left { width: 358px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }

.middle-main .player-box .player-left .music-player { width: 256px; height: 256px; border-radius: 50%; background: url("../images/player-default.png") no-repeat center; position: relative; }

.middle-main .player-box .player-left .music-player__img { width: 137px; height: 137px; border-radius: 50%; position: absolute; overflow: hidden; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

.middle-main .player-box .player-left .music-player__img.active { animation: disc 5s linear 0s infinite; }

.middle-main .player-box .player-left .music-player__img.rotate-pause { animation-play-state: paused; -webkit-animation-play-state: paused; /* Safari 和 Chrome */ }

.middle-main .player-box .player-left .music-player__img img { display: block; width: 100%; height: 100%; }

.middle-main .player-box .player-left .music-player__pointer { width: 90px; height: 220px; position: absolute; right: -10px; top: 0; transform-origin: 66px 28px; transform: rotate(-15deg); transition: all 0.3s; background: url("../images/player-line.png") no-repeat 0 0; background-size: cover; }

.middle-main .player-box .player-left .music-player__pointer.active { transform: rotate(0deg); }

.middle-main .player-box .player-left .music-player__bottom { width: 100%; display: flex; align-items: center; justify-content: space-around; }

.middle-main .player-box .player-left .music-player__bottom .item { width: 106px; height: 60px; padding: 5px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; color: #fff; border: 1px solid #8e8b95; border-radius: 5px; cursor: pointer; }

.middle-main .player-box .player-left .music-player__bottom .item:hover { border-color: #db1d40; }

.middle-main .player-box .player-left .music-player__bottom .item.mobile { display: none; }

.middle-main .player-box .player-left .music-player__bottom .item div { display: flex; align-items: center; color: #8e8b95; }

.middle-main .player-box .player-left .music-player__bottom .item div i { margin-right: 5px; }

.middle-main .player-box .player-right { flex: 1; padding-left: 50px; width: calc(100% - 60px - 358px); }

.middle-main .player-box .player-right .player { height: auto; position: static; background: none; box-shadow: none; }

.middle-main .player-box .player-right .player .container { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }

.middle-main .player-box .player-right .player .container .music-title { margin-bottom: 0; height: 42px; flex: 0 0 auto; margin-bottom: 20px; }

.middle-main .player-box .player-right .player .container .music-title .player-l { margin-right: 20px; }

.middle-main .player-box .player-right .player .container .music-title .icon-img.mobile { padding-left: 20px; margin-right: 20px; color: #ffffff; display: flex; align-items: center; justify-content: center; width: auto; height: 20px; position: relative; }

.middle-main .player-box .player-right .player .container .music-title .icon-img.mobile:after { content: ""; position: absolute; top: 50%; left: -20px; right: -20px; height: 40px; transform: translateY(-50%); border: 1px solid #8e8b95; border-radius: 5px; }

.middle-main .player-box .player-right .player .container .music-title .icon-img.mobile:hover .code-box { display: block; }

.middle-main .player-box .player-right .player .container .music-title .code-box { display: none; width: 116px; height: 158px; padding-top: 20px; border-radius: 5px; position: absolute; top: -10px; right: calc(-100% - 70px); text-align: center; background: url(../images/ewm-bg.png) no-repeat center center; color: #444444; z-index: 400; }

.middle-main .player-box .player-right .player .container .music-title .code-box #qrcode_img { width: 78px; margin: 0 auto; }

.middle-main .player-box .player-right .player .container .music-title .code-box img { width: 78px; height: 78px; }

.middle-main .player-box .player-right .player .container .music-title .code-box h5 { margin-top: 15px; font-size: 12px; }

.middle-main .player-box .player-right .player .container .music-title .code-box h5::before { content: ""; display: inline-block; width: 8px; height: 1px; background-color: #000000; margin-right: 5px; vertical-align: middle; }

.middle-main .player-box .player-right .player .container .music-title .code-box h5::after { content: ""; display: inline-block; width: 8px; height: 1px; background-color: #000000; margin-left: 5px; vertical-align: middle; }

.middle-main .player-box .player-right .player .container .player-middle { width: 100%; padding: 30px 0 20px; display: flex; flex-direction: column; justify-content: center; height: 85px; flex: 0 0 auto; }

.middle-main .player-box .player-right .player .container .player-middle .time { color: #fff; margin-top: 10px; width: 100%; display: flex; flex-direction: row; justify-content: space-between; }

.middle-main .player-box .player-right .player .container .player-middle .time b { font-weight: normal; }

.middle-main .player-box .player-right .player .container .player-foot { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

.middle-main .player-box .player-right .player .container .player-foot i { cursor: pointer; display: inline-block; margin: 0 8px; }

.middle-main .player-box .player-right .player .container .player-foot .icon-mode { margin-left: 0; }

.middle-main .player-box .player-right .player .container .player-foot .icon-voice { cursor: pointer; display: inline-block; width: 18px; height: 16px; margin: 0 8px; margin-right: 102px; background: url("../images/voice.png") no-repeat center; position: relative; }

.middle-main .player-box .player-right .player .container .player-foot .icon-voice:not([data-type="horizontal"]):hover { background: url("../images/voice-on.png") no-repeat center; }

.middle-main .player-box .player-right .player .container .player-foot .icon-voice .voice-press { position: absolute; left: 20px; top: 50%; width: 100px; height: 4px; transform: translateY(-50%); z-index: 300; }

.middle-main .player-box .player-right .player .container .player-foot .icon-voice .voice-press[data-type="horizontal"] { display: block !important; }

.middle-main .player-box .player-right .player .container .player-foot .icon-voice .voice-press:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #7a7a86; border-radius: 3px; }

.middle-main .player-box .player-right .player .container .player-foot .icon-voice .voice-press span { border-radius: 3px; margin-left: 0; position: absolute; left: 0; width: 100%; bottom: 0px; top: 0px; background-color: #cbcbcf; z-index: 301; }

.middle-main .player-box .player-right .player .container .player-foot .icon-voice .voice-press span::after { content: attr(data-content); position: absolute; top: 0; right: 0; transform: translate(0%, -25%); color: #ffffff; width: 9px; height: 9px; border-radius: 50%; background-color: #fff; }

.middle-main .player-box .player-right .music-detail { margin-top: 32px; background: rgba(7, 7, 7, 0.3); border-radius: 5px; padding: 20px 30px; display: flex; flex-direction: row; align-items: center; }

.middle-main .player-box .player-right .music-detail .clear-fix { width: 560px; }

.middle-main .player-box .player-right .music-detail .item { color: #8e8b95; float: left; min-width: 50%; line-height: 28px; }

.middle-main .player-box .player-right .music-detail .item span { color: #fff; margin-left: 5px; }

.middle-main .player-box .player-right .music-detail .down-share { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

.middle-main .player-box .player-right .music-detail .down-share .btn { height: 56px; display: flex; flex-direction: row; align-items: center; text-align: left; color: #fff; background-image: linear-gradient(to right, #2aa146, #13d06c); border-radius: 5px; }

.middle-main .player-box .player-right .music-detail .down-share .btn .icon-img.yinyue { margin-right: 5px; }

.middle-main .player-box .player-right .music-detail .down-share .btn span { font-size: 16px; font-weight: bold; }

.middle-main .player-box .player-right .music-detail .down-share .btn p { font-size: 14px; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn { cursor: pointer; margin-top: 20px; height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #8e8b95; border-radius: 5px; border: 1px solid #8e8b95; position: relative; display: flex; align-items: center; justify-content: center; z-index: 1200; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn span.pc { display: flex; align-items: center; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn .icon-img.share { margin-right: 5px; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn:hover .share-icons { display: block; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn::before { content: ""; position: absolute; top: 30px; left: 0; right: 0; height: 30px; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons { display: none; position: absolute; top: 40px; left: 0; right: 0; padding: 20px 20px 10px; text-align: left; z-index: 1200; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons::after { content: ""; position: absolute; top: 10px; bottom: 0; left: 0; right: 0; background-color: #fff; border-radius: 5px; z-index: -1; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons a { display: flex; align-items: center; font-size: 14px; color: #444444; margin: 10px 0; border: none; z-index: 1200; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons a:hover { background: none; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons a:before { content: ""; }

.middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons a > div { z-index: 1200; box-shadow: 0 2px 10px #333 !important; }

.middle-main .songs-list .playmusic-list { max-height: 500px; overflow-y: scroll; }

.middle-main .music-list:not(:first-child) { display: none; }

.middle-main .music-list.active { display: block; }

.middle-main .music-list .playmusic-list { max-height: 500px; overflow-y: scroll; }

.middle-main .music-list ul { margin-bottom: 20px; min-height: 20px; }

.middle-main .music-list li { flex: 1; height: 50px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 20px; color: #fffbfd; position: relative; }

.middle-main .music-list li:nth-child(odd), .middle-main .music-list li:hover { background-color: #1c1f31; }

.middle-main .music-list li:hover { cursor: pointer; color: #fff; }

.middle-main .music-list li:hover .add { background-position: -330px -2px; }

.middle-main .music-list li a { max-width: calc(100% - 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.middle-main .music-list li a:hover { cursor: pointer; color: inherit; }

.middle-main .music-list li .title-check { overflow: hidden; flex: 1; display: flex; align-items: center; }

.middle-main .music-list li .title-check .layui-form-checkbox { margin-right: 14px; }

.middle-main .music-list li .title-check a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.middle-main .music-list li b { flex: 0.2; font-weight: normal; }

.middle-main .music-list li .add-btn { display: flex; align-items: center; }

.middle-main .music-list li .add-btn .add { margin-right: 10px; }

.middle-main .music-list li .layui-form-checkbox { margin-right: 24px !important; }

.middle-main .music-list li .stop { float: left; }

.middle-main .music-list li .stop + a { margin-left: 20px; }

.middle-main .music-list li .hot { float: left; margin-left: 10px; }

.middle-main .music-list ul + .all-checkbox { margin-top: -20px; }

.middle-main .music-list .all-checkbox { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 50px; margin-bottom: 20px; background-color: #1c1f31; }

.middle-main .music-list .all-checkbox .btns { display: flex; flex-direction: row; align-items: center; }

.middle-main .music-list .all-checkbox .btns .btn { padding: 0 10px; border: 1px solid #fffbfd; color: #fffbfd; height: 26px; }

.middle-main .music-list .all-checkbox .btns .btn + .btn { margin-left: 10px; }

.middle-main.comment .main-title { margin-left: -20px; justify-content: flex-start; }

.middle-main.comment .main-title span { margin-left: 20px; color: #fffbfd; font-weight: normal; font-size: 14px; }

.middle-main.comment .main-title span i { font-style: normal; }

.middle-main.comment .comment-area { background-color: #1c1f31; padding: 20px 30px; }

.middle-main.comment .comment-area .layui-form-item { display: flex; align-items: flex-start; margin-bottom: 0px; }

.middle-main.comment .comment-area .layui-form-item:last-child { margin-bottom: 0; }

.middle-main.comment .comment-area .layui-form-item:last-child .layui-form-label { padding: 9px 15px 0 0; height: 40px; }

.middle-main.comment .comment-area .layui-form-item label { width: 75px; padding-left: 0; text-align: justify; }

.middle-main.comment .comment-area .layui-form-item label::after { display: inline-block; width: 100%; content: ""; height: 0; }

.middle-main.comment .comment-area .layui-form-item label + .layui-input-block { margin-left: 0px; flex: 1; display: flex; flex-direction: column; }

.middle-main.comment .comment-area .layui-form-item .layui-input, .middle-main.comment .comment-area .layui-form-item .layui-textarea { background-color: #131625; border: none; color: #fff; }

.middle-main.comment .comment-area .layui-form-item .layui-input { height: 40px; }

.middle-main.comment .comment-area .layui-form-item .layui-textarea { flex: 1; width: 100%; padding: 10px; resize: none; }

.middle-main.comment .comment-area .layui-form-item .layui-textarea::placeholder { color: #fffbfd; }

.middle-main.comment .comment-area__suffix { flex: 1; display: flex; align-items: center; justify-content: flex-end; }

.middle-main.comment .comment-area__suffix .layui-form-radio { margin-top: 0; margin-right: 0; margin-left: 10px; }

.middle-main.comment .comment-area__suffix .submit { width: 120px; height: 40px; line-height: 40px; background-color: #db1d40; color: #fff; text-align: center; font-size: 16px; }

.middle-main.comment .comment-area .score { height: 40px; justify-content: flex-start; }

.middle-main.comment .comment-area .score > div { display: flex; align-items: center; flex-direction: row; }

.middle-main.comment .comment-area .expression-area { margin: 5px 0 15px; display: flex; align-items: center; color: #fff; }

.middle-main.comment .comment-area .expression-area .icon-img { margin-right: 5px; cursor: pointer; }

.middle-main.comment .comment-list { margin: 20px 0; }

.middle-main.comment .comment-list__item { padding: 30px 0; border-bottom: 1px solid #212434; }

.middle-main.comment .comment-list__header { display: flex; align-items: center; justify-content: space-between; }

.middle-main.comment .comment-list__header .name { font-size: 16px; color: #fff; margin-right: 10px; }

.middle-main.comment .comment-list__header i { font-style: normal; }

.middle-main.comment .comment-list__content { margin-top: 10px; }

.middle-main .mark + .add-to-musicbox + .songs-list.popup { z-index: 98; }

.middle-main .add-to-musicbox { width: 500px; }

.middle-main .add-to-musicbox .popup-body { padding-top: 20px; }

.middle-main .add-to-musicbox .music-name { display: flex; align-items: center; color: #fff; font-size: 14px; }

.middle-main .add-to-musicbox .music-name i { margin-right: 10px; }

.middle-main .add-to-musicbox .add-to { color: #fffbfd; line-height: 32px; }

.middle-main .add-to-musicbox .album-list { border-radius: 0; background-color: #131625; padding: 0 20px; height: 140px; overflow-y: scroll; }

.middle-main .add-to-musicbox .album-list::-webkit-scrollbar { width: 4px; }

.middle-main .add-to-musicbox .album-list::-webkit-scrollbar-thumb { background-color: #383d5b; border-radius: 2px; }

.middle-main .add-to-musicbox .input-album-name { margin-top: 20px; position: relative; height: 40px; line-height: 40px; background-color: #131625; padding: 0 20px; border-radius: 0; display: flex; align-items: center; }

.middle-main .add-to-musicbox .input-album-name input { flex: 1; border: none; background: none; color: #fff; padding-right: 20.0025px; }

.middle-main .add-to-musicbox .input-album-name input::placeholder { color: #fffbfd; }

.middle-main .add-to-musicbox .input-album-name a { display: flex; align-items: center; }

.middle-main .add-to-musicbox .input-album-name a .add { margin-right: 10px; }

.middle-main .add-to-musicbox .btns { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }

.middle-main .add-to-musicbox .btns button { height: 40px; border-radius: 0; color: #fff; border: none; flex: 1; font-size: 16px; }

.middle-main .add-to-musicbox .btns button.determine { background: #db1d40; }

.middle-main .add-to-musicbox .btns button.cancel { margin-left: 20px; background: #1c1f31; }

.middle-main .tab-header + .tab-body { display: block; }

.middle-main .station-list { position: relative; padding-top: 20px; margin-left: 0; margin-right: -20px; display: none; padding-bottom: 1.4667rem; }

.middle-main .station-list::before { content: ""; position: absolute; left: -19px; right: 1px; top: 0; height: 1px; background-color: #212434; }

.middle-main .station-list ul:not(.pagination) { flex: 1; }

.middle-main .station-list ul:not(.pagination) li { float: left; margin-right: 15px; margin-bottom: 20px; width: 198px; background-color: #1c1f31; }

.middle-main .station-list ul:not(.pagination) li a { display: block; padding: 10px; }

.middle-main .station-list ul:not(.pagination) li img { width: 178px; height: 178px; }

.middle-main .station-list ul:not(.pagination) li .station-list__title { font-size: 16px; color: #fff; font-weight: bolder; padding: 0 10px; height: 48px; line-height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; width: 100%; }

.middle-main .station-list ul:not(.pagination) li .station-list__foot { margin-bottom: 10px; padding: 0 10px; height: 18px; display: flex; align-items: center; justify-content: space-between; color: #fff; }

.middle-main .station-list ul:not(.pagination) li .station-list__foot > div { display: flex; align-items: center; }

.middle-main .station-list ul:not(.pagination) li .station-list__foot > div i { margin-right: 5px; }

.middle-main .station-list .pagination { margin-right: 30px; }

.middle-main .station-list .layui-laypage { margin-right: 20px; }

.middle-main .station-right { padding: 30px; width: 400px; }

.middle-main .station-right ul { padding: 30px 0; margin-bottom: 30px; position: relative; }

.middle-main .station-right i.i-title { font-size: 24px; font-weight: bold; color: #fff; }

.middle-main .station-right i.i-title i { margin-left: 10px; color: #07c160; }

.middle-main .station-right i.download-rank + ul::after { content: ""; position: absolute; bottom: 0; left: -30px; right: -30px; height: 1px; background-color: #212434; }

.middle-main .station-right li { display: flex; align-items: flex-start; color: #fffbfd; }

.middle-main .station-right li:not(:last-child) { margin-bottom: 20px; }

.middle-main .station-right li i { margin-right: 20px; margin-top: 5px; color: #fff; font-style: normal; }

.middle-main .station-right li i.icon-img { margin-top: 5px; }

.middle-main .station-right li a { flex: 1; }

.middle-main .burn-flow { padding: 30px; background-color: #1c1f31; display: flex; align-items: center; }

.middle-main .burn-flow .left { display: flex; flex-direction: column; }

.middle-main .burn-flow .left h3 { font-weight: bolder; font-size: 20px; color: #fff; margin-bottom: 15px; }

.middle-main .burn-flow .left .imprint { display: inline-block; width: 173px; height: 38px; background: url(../images/imprint.png) no-repeat 0 0; }

.middle-main .burn-flow .right { margin-left: 100px; display: flex; flex-direction: row; }

.middle-main .burn-flow .right .item { text-align: center; position: relative; padding-right: 100px; margin-right: 20px; }

.middle-main .burn-flow .right .item:not(:last-child)::after { content: ""; position: absolute; top: 10px; right: 0; background: url("../images/arrow.png") no-repeat 0 0; width: 75px; height: 16px; }

.middle-main .burn-flow .right .item div { display: inline-block; width: 50px; height: 41px; position: relative; }

.middle-main .burn-flow .right .item div.active::after { content: ""; position: absolute; right: 3px; bottom: 0; background: url("../images/sprite.png") no-repeat -95px -724px; width: 16px; height: 16px; }

.middle-main .burn-flow .right .item p { font-size: 18px; color: #fff; margin: 10px 0 5px; white-space: nowrap; }

.middle-main .burn-flow .right .item span { color: #fffbfd; }

.middle-main .burn.tab .tab-header { margin-top: 40px; height: 45px; line-height: 45px; border-bottom: 1px solid #212434; display: flex; align-items: center; }

.middle-main .burn.tab .tab-header a { padding: 0 20px; color: #fffbfd; display: inline-block; }

.middle-main .burn.tab .tab-header a.active { font-size: 16px; color: #fff; border-bottom: 3px solid #db1d40; }

.middle-main .burn.tab .tab-header + .tab-body { display: block; }

.middle-main .burn.tab .tab-body { display: none; }

.middle-main .burn.tab .ul-list-header::after { display: none; }

.middle-main .burn.tab .ul-list-header span { width: 100px; text-align: left; }

.middle-main .burn.tab .ul-list-header span:nth-child(2) { flex: none; }

.middle-main .burn.tab .ul-list-header span:nth-child(5) { flex: 1; text-align: left; }

.middle-main .burn.tab .ul-list-header span:nth-child(6), .middle-main .burn.tab .ul-list-header span:nth-child(7) { text-align: center; }

.middle-main .burn.tab .ul-list-header span:last-child { text-align: right; }

.middle-main .burn.tab ul li > span { width: 100px; text-align: left; justify-content: flex-start; }

.middle-main .burn.tab ul li > span:nth-child(2) { flex: none; }

.middle-main .burn.tab ul li > span:nth-child(2) i { margin-left: 0; }

.middle-main .burn.tab ul li > span:nth-child(5) { flex: 1; text-align: left; padding-left: 0px; justify-content: flex-start; }

.middle-main .burn.tab ul li > span:nth-child(6), .middle-main .burn.tab ul li > span:nth-child(7) { text-align: center; justify-content: center; }

.middle-main .burn.tab ul li > span:nth-last-child(2) { width: 100px; justify-content: flex-end; }

.middle-main .burn.tab ul li > span:last-child { display: none !important; }

.middle-main .burn.tab ul li:hover .icon-img.up { background-position: -232px -1102px; }

.middle-main .burn.tab ul li:hover .icon-img.down { background-position: -249px -1102px; }

.middle-main .burn.tab .ul-list-footer { display: flex; justify-content: space-between; background: none; box-shadow: none; padding: 40px 0; height: auto; }

.middle-main .burn.tab .ul-list-footer .price { font-size: 20px; }

.middle-main .burn.tab .ul-list-footer .right { flex: 1; display: flex; justify-content: flex-end; }

.middle-main .burn.tab .ul-list-footer .right button { max-width: 200px; flex: 1; height: 48px; line-height: 48px; text-align: center; border: 1px solid #fffbfd; font-size: 16px; border-radius: 5px; background: none; color: #fffbfd; margin-left: 20px; display: inline-block; }

.middle-main .burn.tab .ul-list-footer .right button.error { width: 300px; background: #db1d40; color: #fff; border-width: 0; }

.middle-main .burn.tab .cd-query { padding-bottom: 100px; }

.middle-main .burn.tab .cd-query li { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; border-bottom: 1px solid #212434; }

.middle-main .burn.tab .cd-query li div { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }

.middle-main .burn.tab .cd-query li div p { color: #fff; }

.middle-main .burn.tab .cd-query li div p.c-red { color: #db1d40; }

.middle-main .burn.tab .cd-query li div:first-child { width: 200px; }

.middle-main .burn.tab .cd-query li div:last-child { min-width: 200px; text-align: right; }

.middle-main .burn.tab .cd-query li div:last-child span { text-align: right; }

.middle-main .burn.tab .cd-query li div:last-child p { display: flex; flex-direction: row; justify-content: flex-end; color: #fffbfd; }

.middle-main .burn.tab .cd-query li div:last-child p .btn { padding: 0 10px; border: 1px solid #313746; }

.middle-main .burn.tab .cd-query li div:last-child p .btn:hover { color: #db1d40; border-color: #db1d40; }

.middle-main .burn.tab .cd-query li div:last-child p .btn + .btn { margin-left: 16px; }

.middle-main .order-instructions { background: #1c1f31; padding: 30px 20px; line-height: 32px; }

.middle-main .order-instructions .title { font-weight: bolder; font-size: 16px; color: #fff; height: 20px; line-height: 20px; border-left: 4px solid #db1d40; padding-left: 15px; margin-bottom: 20px; }

.middle-main .order-instructions * + .title { margin-top: 30px; }

.download-popup .popup-body { padding: 40px; line-height: 30px; }

.download-popup .popup-body .title { font-weight: bolder; font-size: 16px; color: #fff; line-height: 20px; padding-left: 15px; margin-bottom: 20px; position: relative; }

.download-popup .popup-body .title::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 20px; border-radius: 2px; background-color: #db1d40; }
.download-popup .popup-body .title a{color:#fff;}

.download-popup .popup-body .detail { display: flex; line-height: 30px; }

.download-popup .popup-body .detail img { width: 120px; height: 120px; }

.download-popup .popup-body .detail .item { margin-left: 60px; }

.download-popup .popup-body .detail .item div { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.download-popup .popup-body .detail .item span { margin-left: 10px; }

.download-popup .popup-body .down-tips { margin-top: 20px; margin-bottom: 20px; padding: 20px; background-color: #1c1f31; display: flex; align-items: center; justify-content: space-between; }

.download-popup .popup-body .down-tips .quality { color: #db1d40; font-size: 18px; font-weight: bolder; }

.download-popup .popup-body .down-tips .btn { width: 160px; height: 65px; background-image: linear-gradient(to right, #2aa146, #13d06c); color: #fff; font-size: 16px; border-radius: 5px; display: flex; flex-direction: row; justify-content: center; }

.download-popup .popup-body .down-tips .btn + .btn { display: none; }

.download-popup .popup-body .down-tips .btn div { text-align: left; padding-left: 10px; display: flex; flex-direction: column; justify-content: center; line-height: normal; }

.download-popup .popup-body .down-tips .btn div span { font-size: 16px; font-size: bold; }

.download-popup .popup-body .down-tips .btn div p { font-size: 14px; }

.download-popup .mark { z-index: 10; }

.login-popup { background: #171a2b; height: 100%; max-height: 600px; flex-direction: column; z-index: 1300; }

.login-popup .popup-body { padding: 50px 130px 0px !important; }

.login-popup .popup-body .form-item { height: 50px; background: #0b0d19; display: flex; align-items: center; margin-bottom: 20px; padding: 0 20px; }

.login-popup .popup-body .form-item i { margin-right: 20px; }

.login-popup .popup-body .form-item input { flex: 1; background: none; border: none; color: #fff; }

.login-popup .popup-body .form-item input::placeholder { color: #fffbfd; }

.login-popup .popup-body .form-item .input-suffix { color: #017efd; }

.login-popup .popup-body .form-item .input-suffix-img { margin-right: -20px; padding-left: 20px; background-color: #171a2b; }

.login-popup .popup-body .form-item .input-suffix-img img { width: 120px; height: 50px; }

.login-popup .popup-body .form-item-btn .btn { width: 100%; display: block; height: 52px; line-height: 52px; font-size: 16px; color: #fff; background-color: #db1d40; }

.login-popup .popup-body .other-login { margin-top: 40px; }

.login-popup .popup-body .other-login .line { width: 100%; height: 1px; background-color: #212434; position: relative; }

.login-popup .popup-body .other-login .line:before { content: "其他登录方式"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 20px; background-color: #171a2b; color: #fffbfd; }

.login-popup .popup-body .other-login .btns { display: flex; justify-content: space-between; margin-top: 45px; }

.login-popup .popup-body .other-login .btns .layui-btn { flex: 1; height: 50px; line-height: 50px; display: flex; align-items: center; justify-content: center; background-color: #2a2e45; }

.login-popup .popup-body .other-login .btns .layui-btn i { margin-right: 10px; }

.login-popup .popup-body .other-login .btns .layui-btn + .layui-btn { margin-left: 20px; }

.login-popup .popup-body .other-login p { margin-top: 30px; font-size: 16px; text-align: center; }

.login-popup .popup-body .other-login p a { color: #017efd; }

.article-detail__top { background-color: #1c1f31; padding: 20px; text-align: center; }

.article-detail__title { color: #ffffff; font-weight: bolder; font-size: 20px; }

.article-detail__time { color: #fffbfd; }

.article-detail__content { color: #fff; line-height: 36px; padding: 40px 0; }

@media screen and (min-width: 751px) { .player .container .control-btns .btn-prev { display: inline-block; }
  .player .container .control-btns .btn-prev:hover { background-image: url("../images/prev-on.png"); }
  .player .container .control-btns .btn-play-suspend { display: inline-block; }
  .player .container .control-btns .btn-play-suspend.playing { background: url("../images/suspend-play.png") no-repeat center; }
  .player .container .control-btns .btn-next { display: inline-block; }
  .player .container .control-btns .btn-next:hover { background-image: url("../images/next-on.png"); }
  .nav { height: 50px; line-height: 50px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: #171a2b; }
  .nav .nav-item { height: 50px; display: inline-block; color: #fff; font-size: 16px; position: relative; cursor: pointer; z-index: 1200; }
  .nav .nav-item.active { background-color: #db1d40; }
  .nav .nav-item:hover { background-color: #db1d40; }
  .nav .nav-item:hover .nav-child { display: block; }
  .nav .nav-item.mobile { display: none; }
  .nav .nav-item > a { display: block; text-align: center; }
  .nav .nav-item a { display: block; color: inherit; padding: 0 20px; }
  .nav .nav-item .nav-child { display: none; background: #1c1f31; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.5); position: absolute; top: 60px; left: 0; min-width: 100%; z-index: 1200; padding: 10px 0; }
  .nav .nav-item .nav-child:before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background-color: transparent; z-index: 301; }
  .nav .nav-item .nav-child::after { content: ""; display: table; clear: both; }
  .nav .nav-item .nav-child dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; line-height: 30px; color: #ffffff; text-align: center; }
  .nav .nav-item .nav-child dd:hover { color: #db1d40; }
  .nav .nav-item .nav-child dd:hover a { border-color: #db1d40; }
  .nav .nav-item .nav-child dd:nth-child(2n):after, .nav .nav-item .nav-child dd:last-child:after { width: 0; }
  .nav .nav-item .nav-child dd a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; margin: 0 10px; height: 30px; border-radius: 15px; border: 1px solid #40434d; }
  .nav .nav-item .nav-child dd + dd a { margin-top: 10px; }
  .search-condition { margin: 20px 0; display: flex; align-items: center; justify-content: space-between; }
  .search-condition .search-left span { background: url("../images/sprite.png") no-repeat -299px -343px; display: inline-block; width: 55px; height: 24px; line-height: 24px; text-indent: 10px; }
  .search-condition .search-left a { display: inline-block; height: 24px; line-height: 24px; border-radius: 12px; margin-left: 20px; color: #fffbfd; padding: 0 15px; }
  .search-condition .search-left a.active { background: #db1d40; color: #fff; }
  .search-condition .search-right { color: #fffbfd; }
  .search-sort { height: 30px; line-height: 30px; background: #1c1f31; display: flex; align-items: center; border-radius: 3px; }
  .search-sort + .ul-list-header:after { display: none; }
  .search-sort a { margin-right: 20px; padding: 0 10px; color: #fffbfd; height: 100%; }
  .search-sort a.active { background: #db1d40; color: #fff; border-radius: 3px; }
  .notice-index { margin: 0 auto; width: 1300px; height: 50px; display: flex; align-items: center; position: relative; }
  .notice-index .title { color: #fff; }
  .notice-index .layui-carousel, .notice-index [carousel-item] { flex: 1; width: auto; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notice-index a { position: static !important; display: inline-block !important; background: none !important; }
  .notice-index a:not(.more) { padding-left: 10px; padding-right: 10px; color: #fffbfd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 290px; width: auto; }
  .notice-index a:not(.more):hover { color: #fff; }
  .notice-index a.more { position: absolute; right: 0; color: #fffbfd; }
  .rank-wrap .title { flex: 1; display: flex; align-items: center; justify-content: space-between; }
  .rank-wrap .title > div { display: flex; align-items: center; }
  .rank-wrap .title > div:last-child { color: #fffbfd; }
  .rank-wrap .title > div:last-child a { font-size: 14px; color: #fffbfd; padding: 0 8px; }
  .rank-wrap .title > div:last-child a.active, .rank-wrap .title > div:last-child a:hover { color: #db1d40; }
  .rank-wrap .title i { background: url("../images/sprite.png") no-repeat -358px -294px; display: inline-block; width: 31px; height: 26px; margin-right: 20px; }
  .rank-wrap .main-body { padding: 20px 30px; }
  .rank-wrap .main-body .tab-header { height: 28px; line-height: 28px; border-radius: 3px; background: #1c1f31; display: flex; align-items: center; justify-content: space-around; }
  .rank-wrap .main-body .tab-header a { height: 100%; flex: 1; color: #fff; text-align: center; border-radius: 3px; }
  .rank-wrap .main-body .tab-header a.active { background: #db1d40; }
  .rank-wrap .main-body .tab-body ul { padding: 20px 0; }
  .rank-wrap .main-body .tab-body li { display: flex; align-items: flex-start; color: #fffbfd; white-space: normal !important; line-height: 28px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank-wrap .main-body .tab-body li:not(:last-child) { margin-bottom: 20px; }
  .rank-wrap .main-body .tab-body li i { margin-right: 20px; margin-top: 5px; color: #fff; font-style: normal; }
  .rank-wrap .main-body .tab-body li i.icon-img { margin-top: 5px; }
  .rank-wrap .main-body .tab-body li a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .radio-title { display: flex; justify-content: space-between; }
  .radio-title a { margin-right: 30px; display: flex; align-items: center; padding: 0 11px; height: 36px; line-height: 36px; border: 1px solid #8e8b95; border-radius: 3px; font-weight: normal; font-size: 14px; color: #fff; }
  .radio-title a i { margin-right: 5px; }
  .guessyou-link { border-top: 20px solid #0a0c18; margin-left: -20px; margin-right: -20px; padding: 20px; }
  .guessyou-link .main-title { padding-left: 0; }
  .guessyou-link .main-title:before { display: none; }
  .guessyou-link .main-title > div { flex: 1; display: flex; flex-direction: row; }
  .guessyou-link .main-title .right { color: #fff; font-size: 14px; font-weight: normal; display: flex; align-items: center; }
  .guessyou-link .main-title .right i { margin-right: 8px; }
  .guessyou-link .main-title .btn { background-color: #1c1f31; }
  .guessyou-link .main-title .btn + .btn { margin-left: 10px; }
  .guessyou-link .station-list { padding-left: 40px; padding-right: 40px; }
  .guessyou-link .station-list:before { display: none; }
  .guessyou-link .station-list ul:not(.pagination) li { margin-right: 42px; }
  .unpaid-orders .unpaid-nums { color: #fff; margin-top: 35px; margin-bottom: 10px; display: flex; align-items: center; }
  .unpaid-orders .unpaid-nums img { margin-right: 5px; }
  .unpaid-orders .unpaid-nums span { color: #fd8645; }
  .unpaid-orders .flex-between { display: flex; align-items: center; justify-content: space-between; }
  .unpaid-orders .flex-between + div { margin-top: 20px; }
  .unpaid-orders .unpaid-list { border-radius: 5px; border: 1px solid #fd8645; padding: 30px; background-color: #1c1f31; }
  .unpaid-orders .unpaid-list li { display: flex; }
  .unpaid-orders .unpaid-list li + li { border-top: 1px solid #212434; margin-top: 30px; padding-top: 30px; }
  .unpaid-orders .unpaid-list li div:first-child { width: 180px; }
  .unpaid-orders .unpaid-list li div:nth-child(2) { flex: 1; }
  .unpaid-orders .unpaid-list li div:nth-child(3) { width: 150px; }
  .unpaid-orders .unpaid-list li div:nth-child(4) { width: 250px; }
  .unpaid-orders .unpaid-list li div.options { display: flex; align-items: center; justify-content: flex-end; }
  .unpaid-orders .unpaid-list li div.options .btn { padding: 0 10px; display: inline; color: #fffbfd; border: 1px solid #313746; }
  .unpaid-orders .unpaid-list li div.options .btn + .btn { margin-left: 10px; }
  .unpaid-orders .unpaid-list li div.options .btn:hover { color: #db1d40; border-color: #db1d40; }
  .unpaid-orders .unpaid-list li div p { margin-top: 5px; }
  .unpaid-orders .address-list { background-color: #1c1f31; border-radius: 5px; padding: 25px 30px; }
  .unpaid-orders .address-list .pc { display: inline-block; }
  .unpaid-orders .addr-wrap { width: 570px; margin-top: 40px; }
  .unpaid-orders .addr-wrap.pay-methods { width: 400px; }
  .unpaid-orders .addr-wrap .hui-flex { display: flex; }
  .unpaid-orders .addr-wrap .layui-form-label { width: 100px; }
  .unpaid-orders .addr-wrap .hui-input-black { height: 50px; color: #fff; border: 1px solid #212434; border-radius: 5px; background-color: #0b0d19; padding-left: 15px; width: 100%; }
  .unpaid-orders .addr-wrap .addr-item { line-height: 50px; }
  .unpaid-orders .addr-wrap .addr-item:not(:nth-child(1)) { margin-bottom: 20px; }
  .unpaid-orders .addr-wrap .addr-item .layui-form-item { margin-bottom: 20px; }
  .unpaid-orders .addr-wrap .addr-item .item-left { width: 60px; margin-right: 20px; text-align: right; }
  .unpaid-orders .addr-wrap .addr-item .item-right { flex: 1; }
  .unpaid-orders .addr-wrap .addr-item .item-right input { border: 0 !important; }
  .unpaid-orders .addr-wrap .addr-item .item-right .layui-unselect { width: 155px; background-color: #0b0d19; }
  .unpaid-orders .addr-wrap .addr-item .item-right .layui-unselect::placeholder { color: #fffbfd; }
  .unpaid-orders .addr-wrap .addr-item .item-right .select-item:not(:last-child) { margin-right: 10px; }
  .unpaid-orders .addr-wrap .addr-item .item-right .hui-red-btn2 { width: 100%; height: 50px; line-height: 50px; font-size: 16px; margin: 10px 0; background: #db1d40; color: #fff; border: none; border-radius: 5px; } }

@media screen and (max-width: 1300px) { .main-middle .nav { justify-content: space-between; }
  .main-middle .nav .nav-item { flex: 1; padding: 0 3px; }
  .main-middle .nav .nav-item a { font-size: 14px; }
  .main-middle .main-list .list-body li { width: calc((100% - 20px) / 2); }
  .middle-main .player-box .player-right .music-detail { padding: 20px 10px; }
  .middle-main .player-box .player-right .music-detail .item span { font-size: 12px; }
  .middle-main .player-box .player-right .music-detail .clear-fix { width: auto; }
  .middle-main .player-box .player-right .music-detail .down-share { min-width: 150px; }
  .middle-main__right { width: 260px; }
  .middle-main__right.station-right { padding: 15px; } }

@media screen and (min-width: 751px) and (max-width: 1010px) {
  .nav .nav-item a{padding: 0;}
  .middle-main .player-box { height: auto; flex-direction: column; }
  .middle-main .player-box .player-left { width: auto; }
  .middle-main .player-box .player-left .music-player__bottom { margin-top: 30px; }
  .middle-main .player-box .player-right { padding-left: 0; width: 100%; }
  .middle-main .player-box .player-right .player-r { display: none; } }

@media screen and (max-width: 750px) { body { background: #20243c; }
  body.fixed-nav { padding-bottom: 1.8rem; }
  ::placeholder { color: #7b87a6 !important; font-size: 0.32rem; }
  .turn-page { padding: 0.4rem; display: flex; justify-content: space-between; background-color: #20243c; }
  .turn-page .btn { background-color: #222846; color: #fff; border: none; width: 1.8667rem; height: 0.8rem; display: flex; align-items: center; justify-content: center; }
  .layui-form-select dl { background-color: #171a2b; border-color: #171a2b; border-radius: 0.1333rem; }
  .layui-form-select dl dd { padding: 0 0.2667rem; line-height: 0.8rem; }
  .layui-form-select dl dd.layui-this, .layui-form-select dl dd:hover { color: #7b87a6; }
  .main-middle { background: #20243c; margin-top: 1.52rem; }
  .main-middle.index-wrap { background: none; }
  .banner { margin-top: 0.4rem; padding: 0 0.4rem; }
  .banner .layui-carousel { height: 4.2667rem !important; margin-bottom: 0; }
  .banner .layui-carousel img { width: 100%; height: 100%; }
  .main-middle nav { display: block !important; position: fixed; top: 1.4933rem; bottom: 0; left: -100%; width: 6.6667rem !important; height: 100%; background-color: #20243c; z-index: 10000; overflow-y: scroll; padding-bottom: 0.5333rem; }
  .main-middle nav + .mark { top: -1.4933rem; left: -100%; width: 100%; z-index: 101; }
  .main-middle nav.active { left: 0; }
  .main-middle nav.active + .mark { top: 0; width: 100%; left: 6.6667rem; }
  .main-middle nav .nav .nav-item { line-height: 1.1467rem; color: #fff; padding: 0; }
  .main-middle nav .nav .nav-item.active.icon > a::after { background: url("../images/arrow-top.png") no-repeat center; background-size: 100%; }
  .main-middle nav .nav .nav-item.icon > a::after { content: ""; background: url("../images/arrow-bottom.png") no-repeat center; background-size: 100%; position: absolute; right: 0.5333rem; top: 50%; transform: translateY(-50%); width: 0.2933rem; height: 0.16rem; }
  .main-middle nav .nav .nav-item > a { /*pointer-events: none;*/ }
  .main-middle nav .nav .nav-item a { color: inherit; font-size: 0.3733rem; display: block; padding: 0 0.5333rem; position: relative; }
  .main-middle nav .nav .nav-item .nav-child { background-color: #171a2b; display: none; }
  .main-middle nav .nav .nav-item .nav-child dd { height: 1.1467rem; line-height: 1.1467rem; position: relative; color: #7b87a6; }
  .main-middle nav .nav .nav-item .nav-child dd a { padding-left: 1.1467rem; }
  .main-middle nav .nav .nav-item .nav-child dd a::after { content: ""; background: url("../images/arrow-right.png") no-repeat center; background-size: 100%; position: absolute; left: 0.5333rem; top: 50%; transform: translateY(-50%); width: 0.1867rem; height: 0.2667rem; }
  .main-middle .logo-search { height: auto; }
  .main-middle .logo-search form { width: 100%; padding: 0 0.4rem 0.2rem; position: relative; }
  .main-middle .logo-search form input { display: block; width: 100%; height: 0.9333rem; line-height: 0.9333rem; background: #171a2b; border-radius: 0.1333rem; border: none; padding: 0 0.2667rem 0 0.2667rem; font-size: 0.32rem; }
  .main-middle .logo-search form input::placeholder { color: #7b87a6; }
  .main-middle .logo-search form .btn {justify-content: center;text-align:left;    white-space: nowrap; width: 2rem; height: 0.9333rem; margin-left: 0.16rem; padding: 0;
    /* position: absolute; left: 0; top: 50%;  */
    /* transform: translateY(-50%); */
    background:#db1d40;
    border-radius: 3px;
     /* background: url("../images/search.png") no-repeat center; */
      background-size: 0.36rem 0.3333rem;    min-width: auto; }
   .main-middle .logo-search form .btn img{display:inline-block;}
  .notice { margin: 0 0.4rem 0.2667rem 0.4rem; display: flex; flex-direction: row; align-items: center; }
  .notice img { margin-right: 0.0333rem; width: 1.0667rem; height: 0.48rem; }
  .notice a { flex: 1; color: #fff; font-size: 0.32rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .main-middle .main-list.first-container { display: flex; flex-direction: column; border-top-width: 0; }
  .main-middle .main-list.first-container .left { border-top: 0.2133rem solid #171a2b; }
  .notice-wrap { display: block !important; padding: 0 0.4rem; width: 100%; flex: 1; margin-left: 0; background: url("../images/notice.png") no-repeat 0.4rem center; background-size: 1.0667rem 0.48rem; height: 1.0667rem; }
  .notice-wrap .main-header { display: none; }
  .notice-wrap .layui-carousel { background: none; margin-bottom: 0; padding-left: 1.3rem; line-height: 1.0667rem; color: #ffffff; overflow: hidden; }
  .notice-wrap .layui-carousel a { color: #ffffff; line-height: 1.0667rem; display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notice-wrap .layui-carousel a.layui-this { display: block; }
  .notice-wrap .layui-carousel * { background: none; }
  .notice-wrap .layui-carousel > [carousel-item] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;animation: rotaryBlockFirst 20s linear infinite;z-index: -999;}
  .notice-wrap .layui-carousel > [carousel-item]:before { display: none; }
  .main-middle .main-list { margin-bottom: 0; border-top: 0.2133rem solid #171a2b; }
  .main-middle .main-list .left { background: none; }
  .main-middle .main-list .main-header { flex-direction: column; align-items: flex-start; padding: 0.4rem 0.4rem 0; height: 2.2133rem; border-bottom-color: #383d5b; }
  .main-middle .main-list .main-header .title { position: relative; border: none; width: 100%; padding-left: 0; font-size: 0.3733rem; }
  .main-middle .main-list .main-header .title::after { font-family: layui-icon !important; font-size: 0.5333rem; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\e602"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .main-middle .main-list .main-header .btns { margin-left: 0; position: relative; width: 100%; overflow-x: scroll; overflow-y: hidden; display: block; }
  .main-middle .main-list .main-header .btns::-webkit-scrollbar { width: 0; height: 0; }
  .main-middle .main-list .main-header .btns::-webkit-scrollbar-thumb { background-color: #383d5b; border-radius: 0.0667rem; }
  .main-middle .main-list .main-header .btns .scroll { position: absolute; left: 0; right: auto; top: 0; bottom: 0; width: auto; display: flex; align-items: center; height: auto; text-overflow: ellipsis; white-space: nowrap; }
  .main-middle .main-list .main-header .btns .scroll::-webkit-scrollbar { width: 0; }
  .main-middle .main-list .main-header .btns .scroll::-webkit-scrollbar-thumb { background-color: #383d5b; border-radius: 0.0667rem; }
  .main-middle .main-list .main-header .btns .btn { display: inline-block; background: none; padding: 0; height: 1.28rem; line-height: 1.28rem; color: #7b87a6; font-size: 0.3733rem; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main-middle .main-list .main-header .btns .btn + .btn { margin-left: 0.1333rem; }
  .main-middle .main-list .main-header .btns .btn.active { background: none; position: relative; font-weight: bolder; color: #fff; }
  .main-middle .main-list .main-header .btns .btn.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 0.0533rem; background-color: #db1d40; border-radius: 0.0267rem; }
  .main-middle .main-list .list-body { padding: 0.2667rem 0.4rem; width: 10rem; }
  .main-middle .main-list .list-body li { width: 100%; background: none !important; font-size: 0.3733rem; color: #ffffff; padding: 0; height: 1.0667rem; line-height: 1.0667rem; }
  .main-middle .main-list .list-body li:nth-child(n + 11) { display: none; }
  .main-middle .main-list .list-body li > div { font-size: 0.3733rem; padding-right: 0.1333rem; width: calc(100%); }
  .main-middle .main-list .list-body li > div input[type="checkbox"], .main-middle .main-list .list-body li > div .layui-form-checkbox { display: none; }
  .main-middle .main-list .list-body li .icon-down { display: none; width: 0.6667rem; height: 0.6667rem; background-image: url("../images/play.png"); background-size: 0.48rem 0.48rem; }
  .main-middle .main-list .list-body li:hover .icon-down { background-image: url("../images/play.png"); background-size: 0.48rem 0.48rem; }
  .main-middle .main-list .list-body .all-checkbox { display: none; }
  .links { background: none; padding: 0; border-top: 0.2133rem solid #171a2b; }
  .links span { width: 100%; height: 1.3333rem; display: flex; align-items: center; font-size: 0.3733rem; padding: 0 0.4rem; position: relative; border-bottom: 1px solid #383d5b; }
  .links span:after { font-family: layui-icon !important; font-size: 0.5333rem; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\e602"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); }
  .links .container a { display: inline-block; color: #fff; margin: 0 0.1333rem 0.3333rem 0; font-size: 0.3733rem; background: #2e365a; width: 2.6667rem; height: 0.8rem; line-height: 0.8rem; text-align: center; }
  .copyright { color: #7b87a6; line-height: 2; padding: 0.4rem; }
  .copyright p:last-child { font-size: 0.3rem; }
  .layui-table-page { display: none !important; }
  .middle-main { margin-top: 0; padding: 0; }
  .middle-main .player-box {margin-top: -2.6rem;width: 100vw;height: calc(100vh);padding: 0;padding-bottom: 10vh;position: relative;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;margin-bottom: 0;}
  .middle-main .player-box .player-left {/* flex: 1; */width: 100%;padding-top: 2.5rem;}
  .middle-main .player-box .player-left .mobile.music-name { color: #fff; margin-top: 0.4rem; font-size: 0.4rem; text-align: center; }
  .middle-main .player-box .player-left .music-player-top { position: fixed; top: 1.62rem; left: 0.4rem; right: 0.4rem; display: flex; align-items: center; justify-content: space-around; color: #fff; }
  .middle-main .player-box .player-left .music-player-top .rq { display: flex; align-items: center; }
  .middle-main .player-box .player-left .music-player-top > * { flex: 1; display: flex; align-items: center; justify-content: center; }
  .middle-main .player-box .player-left .music-player__bottom { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 0.5333rem; }
  .middle-main .player-box .player-left .music-player__bottom .item { border: none; flex-direction: row; justify-content: center; flex: 1; border-radius: 0; padding: 0; width: auto; height: auto; }
  .middle-main .player-box .player-left .music-player__bottom .item.mobile { display: flex; }
  .middle-main .player-box .player-left .music-player__bottom .item.mobile.list { margin-bottom: -5.9rem; z-index: 1000; }
  .middle-main .player-box .player-left .music-player__bottom .item div { flex-direction: row; font-size: 0; justify-content: center; text-align: center; }
  .middle-main .player-box .player-left .music-player__bottom .item div i { margin-right: 0; }
  .middle-main .player-box .player-left .music-player__bottom .item.rq { display: none; }
  .middle-main .player-box .player-left .music-player {width: 6rem;height: 6rem;background: none;position: relative;}
  .middle-main .player-box .player-left .music-player > img {width: 6rem;height: 6rem;position: absolute;left: 0;top: 50%;margin-top: -3rem;right: 0;bottom: 0;}
  .middle-main .player-box .player-left .music-player .music-player__img { width: 4.2667rem; height: 4.2667rem; }
  .middle-main .player-box .player-left .music-player .music-player__img img { width: 100%; height: 100%; }
  .middle-main .player-box .player-left .music-player__pointer {width: 2.7867rem;height: 6.8533rem;top: -0.3333rem;right: -0.9333rem;transform-origin: 1.8667rem 0.8rem;background: url("../images/player-line-m.png") no-repeat 0 0;background-size: 80% 80%;}
  .middle-main .player-box .player-right {/* flex: inherit; */height: 5rem;padding: 0 0.4rem;width: 100%;}
  .middle-main .player-box .player-right .player .container .player-middle { padding: 0.4rem 0; }
  .middle-main .player-box .player-right .player .container .player-middle .time { font-size: 0.2667rem; }
  .middle-main .player-box .player-right .player .container .player-foot i { margin: 0; }
  .middle-main .player-box .player-right .player .container .player-foot .control-btns { width: 3.5733rem; }
  .middle-main .player-box .player-right .player .container .player-foot .mobile { display: flex; align-items: center; }
  .middle-main .player-box .player-right .player .container .player-foot .icon-voice { margin-right: 0; }
  .middle-main .player-box .player-right .player .container .player-foot .icon-voice .voice-press { width: 0; }
  .middle-main .player-box .player-right .music-detail { background: none; padding: 0; }
  .middle-main .player-box .player-right .music-detail .clear-fix::after { display: block; }
  .middle-main .player-box .player-right .music-detail .clear-fix .item { line-height: 2; font-size: 0.3733rem; color: #7b87a6; }
  .middle-main .player-box .player-right .music-detail .clear-fix .item span { color: #fff; font-size: inherit; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body { position: relative; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body .album-detail { display: flex; align-items: center; padding: 0; margin-top: 0.5333rem; margin-bottom: 0.7467rem; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body .img { width: 2.4rem; height: 2.4rem; padding-right: 0; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body .img img { display: block; width: 2.4rem; height: 100%; border-radius: 0.1333rem; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body .detail-right { margin-left: 0.4rem; color: #fff; font-size: 0.32rem; display: grid; grid-template-columns: 1fr 1fr; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body .detail-right .detail-item { margin-bottom: 0.2rem; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body .detail-right .detail-item:nth-child(odd) { margin-left: 0.2667rem; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body .detail-right img { display: none; }
  .middle-main .player-box .player-right .music-detail .clear-fix .popup-body .detail-right span { color: #7b87a6; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn { border-width: 0; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons { padding: 0; top: auto; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons::after { display: none; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons .popup-body { display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 0.4rem; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons .popup-body.pc { display: none !important; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons a { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.32rem; color: #fff; z-index: 99; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons .share-cancel { height: 1.28rem; line-height: 1.28rem; color: #fff; font-size: 0.4rem; text-align: center; background-color: #222846; border-radius: 0 0 0.4rem 0.4rem; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons ul { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 0.4rem 0 1.68rem; position: relative; }
  .middle-main .player-box .player-right .music-detail .down-share .share-btn .share-icons ul::after { content: "取消分享"; position: absolute; bottom: 0; left: 0; right: 0; color: #fff; font-size: 0.4rem; height: 1.28rem; line-height: 1.28rem; text-align: center; background-color: #222846; border-radius: 0 0 0.4rem 0.4rem; }
  .middle-main .songs-list { height: 10.6667rem; }
  .middle-main .songs-list .tab-header { z-index: 500; font-size: 0.4267rem; position: relative; margin-bottom: 0.2667rem; }
  .middle-main .songs-list .tab-header::before { display: none; }
  .middle-main .songs-list .tab-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #383d5b; }
  .middle-main .songs-list .tab-header .swiper-container { margin-left: 0.4rem; margin-right: 0.4rem; }
  .middle-main .songs-list .tab-header .swiper-container .swiper-wrapper .swiper-slide { height: 1.6rem; line-height: 1.6rem; width: auto; position: relative; font-size: 0.4267rem; color: #7b87a6; font-weight: normal; background: none !important; }
  .middle-main .songs-list .tab-header .swiper-container .swiper-wrapper .swiper-slide.active { color: #fff; }
  .middle-main .songs-list .tab-header .swiper-container .swiper-wrapper .swiper-slide.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.0533rem; background: #db1d40; }
  .middle-main .songs-list .tab-body { position: relative; z-index: 410; flex: 1; }
  .middle-main .songs-list.popup li input[type="checkbox"] + .layui-form-checkbox { margin-right: 0.2667rem !important; }
  .middle-main .songs-list.popup li .stop + a { margin-left: 0.2667rem; }
  .middle-main .songs-list.popup li a { max-width: calc(100% - 1.8rem); width: auto !important; line-height: normal !important; }
  .middle-main .songs-list.popup li .delete, .middle-main .songs-list.popup li .add-btn { position: absolute; right: 0; font-size: 0; }
  .middle-main .songs-list.popup li .add-btn i.add { margin-right: 0; background-position: -0.57333rem -13.90667rem; background-size: 5.33333rem; width: 0.5333rem; height: 0.5333rem; }
  .middle-main .songs-list.popup .all-checkbox { margin-top: -0.2667rem; padding: 0.2rem 0.4rem; height: auto; margin-bottom: 0.2667rem; }
  .middle-main .songs-list.popup .all-checkbox input[type="checkbox"] + .layui-form-checkbox span { margin-left: 0.6rem !important; }
  .middle-main .songs-list.popup .all-checkbox .btn { padding: 0 0.1333rem; height: 0.6rem; }
  .middle-main .music-list .layui-form { overflow: hidden; height: 8.5rem; padding-bottom: 0.5rem; }
  .middle-main .music-list .playmusic-list,.middle-main .music-list .playmusic-list2 { max-height: 8.5rem; overflow-y: scroll; }
  .middle-main .music-list li { height: 1.2rem; color: #fff; padding: 0; margin: 0 0.4rem; flex-direction: row-reverse; justify-content: space-between; font-size: 0.3733rem; }
  .middle-main .music-list li:nth-child(odd) { background: none; }
  .middle-main .music-list li span { margin-left: 0; max-width: calc(100% - 1.5rem); }
  .middle-main .music-list li .icon-img.hot, .middle-main .music-list li b { display: none; }
  .middle-main .add-to-musicbox { top: auto; width: auto; }
  .middle-main .add-to-musicbox .music-name { display: flex; align-items: center; color: #fff; font-size: 0.3733rem; }
  .middle-main .add-to-musicbox .music-name i { margin-right: 0.1333rem; }
  .middle-main .add-to-musicbox .add-to { color: #7b87a6; }
  .middle-main .add-to-musicbox .album-list { border-radius: 0.1333rem; background-color: #171a2b; padding: 0.2667rem; margin-top: 0.2rem; height: 3.3333rem; overflow-y: scroll; }
  .middle-main .add-to-musicbox .album-list::-webkit-scrollbar { width: 0.1333rem; }
  .middle-main .add-to-musicbox .album-list::-webkit-scrollbar-thumb { background-color: #383d5b; border-radius: 0.0667rem; }
  .middle-main .add-to-musicbox .input-album-name { margin-top: 0.2667rem; position: relative; height: 1.0667rem; line-height: 1.0667rem; background-color: #171a2b; padding: 0 0.2667rem; border-radius: 0.1333rem; display: flex; align-items: center; }
  .middle-main .add-to-musicbox .input-album-name input { flex: 1; border: none; background: none; color: #fff; padding-right: 0.2667rem; }
  .middle-main .add-to-musicbox .input-album-name input::placeholder { color: #7b87a6; }
  .middle-main .add-to-musicbox .input-album-name a { display: flex; align-items: center; }
  .middle-main .add-to-musicbox .input-album-name a .add { margin-right: 0.1333rem; }
  .middle-main .add-to-musicbox .btns { margin-top: 0.4rem; display: flex; align-items: center; justify-content: space-between; }
  .middle-main .add-to-musicbox .btns button { height: 1.0667rem; border-radius: 0.1333rem; color: #fff; border: none; flex: 1; font-size: 0.4rem; }
  .middle-main .add-to-musicbox .btns button.determine { background: #db1d40; }
  .middle-main .add-to-musicbox .btns button.cancel { margin-left: 0.2667rem; background: #2e365a; }
  .middle-main .comment-area { position: relative; padding: 0 !important; }
  .middle-main .comment-area .popup-body { padding: 0.2667rem 0.4rem 1.44rem !important; }
  .middle-main .comment-area .layui-form-label { display: none; }
  .middle-main .comment-area .layui-form-item { margin-bottom: 0.2667rem !important; position: relative; }
  .middle-main .comment-area .layui-form-item:first-child { flex-direction: column-reverse; }
  .middle-main .comment-area .layui-form-item .layui-input-inline { margin: 0; padding: 0; left: 0; width: 100%; }
  .middle-main .comment-area .layui-form-item .score { display: flex; flex-direction: column; align-items: flex-start; justify-self: flex-start; color: #fff; margin-bottom: 0.2667rem; height: auto; }
  .middle-main .comment-area .layui-form-item .score > span { font-size: 0.3733rem; color: #7b87a6; }
  .middle-main .comment-area .layui-form-item .score > div { margin-top: 0.1333rem; width: 100%; display: flex; flex-direction: row; justify-content: space-between; }
  .middle-main .comment-area .layui-form-item .score > div .layui-form-radio { margin-left: 0; margin-right: 0.1rem; }
  .middle-main .comment-area .layui-form-item .score > div .layui-form-radio div { color: #fff !important; }
  .middle-main .comment-area .layui-form-item .verify-code img { width: 2.9867rem; height: 1.0667rem; }
  .middle-main .comment-area .layui-form-item input { padding: 0 0.2667rem; width: 100%; min-width: calc(8.6667rem - 2.9867rem); height: 1.0667rem !important; border-radius: 0.1333rem; }
  .middle-main .comment-area .layui-form-item input::placeholder { color: #7b87a6; }
  .middle-main .comment-area .layui-form-item .layui-input-block { width: 100%; position: relative; }
  .middle-main .comment-area .layui-form-item .layui-input-block .expression-area { position: absolute; right: 0.1333rem; bottom: 0.1333rem; margin: 0; font-size: 0; }
  .middle-main .comment-area .layui-form-item .layui-input-block .expression-area .expression { margin-right: 0; }
  .middle-main .comment-area .layui-form-item .layui-textarea { width: 100%; border-radius: 0.1333rem; }
  .middle-main .comment-area .layui-form-item .layui-textarea::placeholder { color: #7b87a6 !important; }
  .middle-main .comment-area .layui-btn.submit { width: 100%; position: absolute; top: 1.3333rem; left: 0; right: 0; height: 1.1733rem; line-height: 1.1733rem; text-align: center; border-radius: 0.1333rem; font-size: 0.4267rem; }
  .middle-main .comment-list { color: #fff; margin: 0 !important; }
  .middle-main .comment-list__title { display: flex; align-items: center; justify-content: space-between; height: 1.5733rem; padding: 0 0.4rem; }
  .middle-main .comment-list__title h3 { font-size: 0.4267rem; font-weight: bolder; }
  .middle-main .comment-list__title span { font-size: 0.3733rem; display: flex; align-items: center; }
  .middle-main .comment-list__item { padding: 0.4rem !important; border-bottom-color: #383d5b !important; }
  .middle-main .comment-list__item:last-child { border-bottom-width: 0 !important; }
  .middle-main .comment-list__header .name { font-size: 0.3733rem !important; color: #7b87a6 !important; font-weight: normal; margin-right: 0.1333rem !important; }
  .middle-main .comment-list__header .score { font-size: 0.3733rem; color: #7b87a6; }
  .middle-main .comment-list__header .time { color: #7b87a6; font-size: 0.32rem; }
  .middle-main .comment-list__content { margin-top: 0.2rem !important; font-size: 0.32rem; }
  .middle-main__left { background-color: #20243c; padding: 0.4rem 0 0.4rem 0.4rem; width: calc(100%); }
  .middle-main__left .tab-header { font-size: 0; line-height: normal; margin-bottom: 0; padding-left: 0; }
  .middle-main__left .tab-header::before { width: 0; }
  .middle-main__left .tab-header .btns { height: 1.0133rem; flex: 1; align-items: center; justify-content: flex-start; border-bottom: 1px solid #383d5b; margin-left: -0.4rem; margin-bottom: 0.4rem; }
  .middle-main__left .tab-header .btns .btn { font-size: 0.3733rem; color: #7b87a6; background: none; padding: 0 0.1334rem; height: 100%; line-height: normal; margin: 0 0.4rem; }
  .middle-main__left .tab-header .btns .btn.active { color: #fff; border-bottom: 4px solid #db1d40; }
  .middle-main__left .station-list { margin-left: 0; margin-right: 0; }
  .middle-main__left .station-list .layui-laypage { padding-left: 0; }
  .middle-main__left .station-list ul:not(.pagination) li { background-color: #2e365a; border-radius: 0.1333rem; width: 4.4rem; margin-right: 0.4rem; margin-bottom: 0.4rem; }
  .middle-main__left .station-list ul:not(.pagination) li a { padding: 0.2667rem 0.2667rem 0; }
  .middle-main__left .station-list ul:not(.pagination) li img { width: 3.8667rem; height: 3.6533rem; }
  .middle-main__left .station-list ul:not(.pagination) li .station-list__title { font-size: 0.3733rem; height: 0.88rem; line-height: 0.88rem; font-weight: normal; border-bottom: 1px solid #404a74; }
  .middle-main__left .station-list ul:not(.pagination) li .station-list__foot { height: 0.9333rem; margin-bottom: 0; padding: 0 0.1333rem; }
  .middle-main__left .station-list ul:not(.pagination) li .station-list__foot > div i { margin-right: 0.1333rem; }
  .middle-main__right { transform: translateY(100%); width: calc(100% - 0.2667rem * 2) !important; margin-left: 0; }
  .middle-main__right.station-right { padding: 0; }
  .middle-main__right.station-right .tab-body { height: 9.4rem; overflow-y: scroll; }
  .middle-main__right.station-right ul { padding-left: 0.4rem !important; padding-right: 0.4rem !important; }
  .middle-main__right.station-right ul li:not(:last-child) { margin-bottom: 0.35rem; }
  .middle-main__right.station-right ul li i { font-style: italic; margin-right: 0.2667rem; margin-top: 0; width: 0.48rem !important; }
  .middle-main__right.station-right ul li i.icon-img { margin-top: 0.0667rem; }
  .middle-main__right.station-right ul li a { font-size: 0.3733rem; }
  .middle-main__right .tab-header { height: 1.4667rem; display: flex; align-items: center; justify-content: space-around; border-bottom: 1px solid #383d5b; }
  .middle-main__right .tab-header div { margin: 0 0.5333rem; flex: 1; height: 100%; font-size: 0.4rem; color: #7b87a6; display: flex; align-items: center; justify-content: center; }
  .middle-main__right .tab-header div.active { color: #fff; border-bottom: 4px solid #db1d40; font-weight: bolder; }
  .middle-main__right .tab-body:not(:nth-child(2)) { display: none; }
  .middle-main__right ul { margin-bottom: 0 !important; padding: 0.4rem 0 !important; }
  .middle-main__right ul::after { display: none; }
  .middle-main__right ul li i { width: 0.6667rem !important; }
  .middle-main__right ul li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.3733rem; color: #7b87a6; }
  .middle-main__right.on { transform: translateY(0%); }
  .share-popup { position: fixed; top: 50%; left: 50%; margin-left: -3.4667rem; margin-top: -2.4133rem; width: 6.9333rem; height: 4.84rem; background: url("../images/tips-bg.png") no-repeat 0 0; background-size: 6.9333rem 4.84rem; z-index: 1300; display: none; }
  .share-popup.on { display: block; }
  .share-popup .title { height: 0.8rem; display: flex; align-items: center; justify-content: center; font-size: 0.4rem; color: #fff; }
  .share-popup__body { padding-top: 0.7rem; line-height: 2; font-size: 0.3733rem; color: #7b87a6; text-align: center; }
  .share-popup button { display: block; background-color: #db1d40; color: #fff; font-size: 0.4rem; text-align: center; font-weight: bolder; border: none; width: 5.3333rem; height: 0.9333rem; line-height: 0.9333rem; border-radius: 0.0667rem; margin: 0.4rem auto 0; }
  .share-popup .close { position: absolute; top: 5.3333rem; left: 50%; margin-left: -0.4933rem; width: 0.9867rem; height: 0.9867rem; background: url("../images/tips-close.png") no-repeat center; background-size: 0.9867rem 0.9867rem; }
  .wxqqshare { display: none; }
  .wxqqshare__body { color: #fff; display: flex; flex-direction: column; position: fixed; top: 0.1333rem; right: 0; z-index: 9999; }
  .wxqqshare__body img { margin-left: 0.5rem; }
  .wxqqshare__body div { margin-right: 0.4rem; }
  .wxqqshare__body .button { background-color: #13d06c; padding: 0.1333rem; margin-top: 0.2rem; width: 2rem; text-align: center; }
  .album { background-color: #20243c; }
  .album .tab-header { font-size: 0; border-left: 0; padding-left: 0; margin-bottom: 0; margin-top: 0.4rem; justify-content: flex-start; border-bottom: 1px solid #383d5b; }
  .album .tab-header::before { width: 0; }
  .album .tab-header .btns { height: 1rem; }
  .album .tab-header .btns .btn { margin-left: 0.4rem !important; font-size: 0.3733rem; color: #7b87a6; background: none; height: inherit; line-height: 0.8rem; padding: 0; }
  .album .tab-header .btns .btn.active { border-bottom: 4px solid #db1d40; color: #fff; }
  .album .img-list { padding: 0; margin: 0; border: none; padding-left: 0.4rem; padding-top: 0.4rem; }
  .album .img-list li { margin-right: 0.4rem; width: 2.8rem; height: 4.4rem; margin-bottom: 0.2667rem; }
  .album .img-list li:nth-child(3n + 3) { margin-right: 0; }
  .album .img-list li:nth-child(5n + 5) { margin-right: 0.4rem; }
  .album .img-list li .img { width: 2.8rem; height: 2.8rem; }
  .album .img-list li .img img { width: 2.8rem; height: 2.8rem; border-radius: 0.1333rem; }
  .album .img-list li h3 { color: #fff; font-size: 0.3733rem; }
  .album .img-list li p { color: #fffbfd; font-size: 0.32rem; }
  .middle-main.list-page .crumbs { margin-bottom: 0; padding: 0.2rem 0.4rem 0; }
  .middle-main.list-page .crumbs h3 { font-size: 0.32rem; color: #db1d40; }
  .middle-main.list-page .introduction { padding: 0.2667rem 0.4rem; margin-bottom: 0; line-height: 0.6667rem; font-size: 0.32rem; }
  .middle-main.list-page .introduction.search-form { background-color: #20243c; }
  .middle-main.list-page .introduction .layui-form .layui-form-item { margin-top: 0.2667rem; margin-top: 0.2667rem; height: 0.9333rem; }
  .middle-main.list-page .introduction .layui-form .layui-form-item .layui-input-inline { margin: 0; }
  .middle-main.list-page .introduction .layui-form .layui-form-item .layui-input-inline + .layui-input-inline { margin-left: 0.2667rem; }
  .middle-main.list-page .introduction .layui-form .layui-form-item .layui-input { padding-left: 0.2667rem; padding-right: 0.4rem; font-size: 0.32rem; height: 0.9333rem; background-color: #171a2b; border-color: #171a2b; border-radius: 0.1333rem; }
  .middle-main.list-page .introduction .layui-form .layui-form-item .layui-input:focus, .middle-main.list-page .introduction .layui-form .layui-form-item .layui-input:hover { border-color: #171a2b !important; }
  .middle-main.list-page .introduction .layui-form .layui-form-item .layui-icon, .middle-main.list-page .introduction .layui-form .layui-form-item .layui-edge { right: 0.2667rem; font-size: 0.4rem; }
  .middle-main.list-page .introduction .layui-form .layui-form-item .layui-edge { background: url("../images/arrow-bottom.png") no-repeat center; background-size: 0.2933rem 0.16rem; }
  .middle-main.list-page .introduction .layui-form .layui-form-item .layui-icon-search { background: url("../images/search-mini.png") no-repeat center; background-size: 0.3467rem 0.3333rem; }
  .middle-main.list-page .introduction .layui-form .layui-form-item:last-child .layui-input-inline:last-child { display: none; }
  .middle-main.list-page .main-types { position: fixed; top: -100%; left: 0; right: 0; background: #20243d; padding-bottom: 0.2667rem; padding-left: 0.4rem; z-index: 1202; transition: all 0.6s linear; }
  .middle-main.list-page .main-types::after { content: ""; position: absolute; top: 0 !important; left: 0; right: 0; bottom: 0; background-color: #20243d !important; z-index: -1; }
  .middle-main.list-page .main-types.on { top: 1.52rem; }
  .middle-main.list-page .main-types .mark { top: 1.52rem; }
  .middle-main.list-page .main-types .type-item { display: block; padding: 0; height: auto; }
  .middle-main.list-page .main-types .type-item:after { content: ""; clear: both; display: table; }
  .middle-main.list-page .main-types .type-item span { display: block; width: 100%; color: #6f78a4; font-size: 0.32rem; margin-right: 0.2667rem; margin-bottom: 0; line-height: 0.8rem; }
  .middle-main.list-page .main-types .type-item a { float: left; padding: 0; width: 2.9067rem; height: 0.8rem; line-height: 0.8rem; color: #fff; background-color: #2e365a; border-radius: 0.0667rem; margin-right: 0.2667rem; margin-bottom: 0.2667rem; overflow: hidden; position: relative; }
  .middle-main.list-page .main-types .type-item a.selected { background-color: transparent; border: 1px solid #db1d40; }
  .middle-main.list-page .main-types .type-item a.selected::before { content: ""; position: absolute; right: -1px; bottom: -1px; background: url(../images/selected.png) no-repeat 0 0; background-size: 0.4267rem 0.4267rem; width: 0.4267rem; height: 0.4267rem; }
  .middle-main.list-page .ul-list-header { height: 0.6667rem; display: flex; align-items: center; padding: 0 0.2667rem; color: #fffbfd; }
  .middle-main.list-page .ul-list-header span { flex: 1; }
  .middle-main.list-page ul { background-color: #20243c; padding-top: 0.4rem; }
  .middle-main.list-page ul li { color: #ffffff !important; position: relative; height: 1.0667rem !important; padding: 0 0.4rem !important; }
  .middle-main.list-page ul li:nth-child(odd) { background-color: transparent !important; }
  .middle-main.list-page ul li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .middle-main.list-page ul li > span:nth-child(2) { width: calc(100% - 0.8rem) !important; display: flex; }
  .middle-main.list-page ul li > span:nth-child(2) span { font-size: 0.3733rem; max-width: calc(100% - 0.8rem); }
  .middle-main.list-page ul li > span:nth-child(1) { width: 2.3rem; }
  .middle-main.list-page ul li > span:not(:nth-child(1)):not(:nth-child(2)):not(:last-child) { display: none !important; }
  .middle-main.list-page ul li > span .stop { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); margin-right: 0 !important; }
  .middle-main.list-page .ul-list-footer { position: fixed !important; bottom: 0; left: 0; right: 0; height: 1.4667rem !important; background: #222846; padding: 0 0.4rem; margin-bottom: 0; }
  .middle-main.list-page .ul-list-footer.static { position: static !important; }
  .middle-main.list-page .ul-list-footer .btns .btn { width: 2.4rem; height: 0.8rem; display: flex; align-items: center; color: #fff; justify-content: center; font-size: 0.3733rem; border-radius: 0.0667rem; background: #2e365a; border: none; padding: 0; }
  .middle-main.list-page .ul-list-footer .btns .btn + .btn { margin-left: 0.2667rem; }
  .middle-main.list-page .ul-list-footer .btns .btn .icon-img { margin-right: 0.1067rem; }
  .middle-main.list-page .album-detail { padding: 0 0.4rem; background-color: #20243c; padding-top: 0.4rem; padding-bottom: 0.4rem; margin-bottom: 0.2667rem; }
  .middle-main.list-page .album-detail .img { width: 3.7333rem; height: 3.7333rem; border-radius: 0.1333rem; background: none; padding-right: 0; }
  .middle-main.list-page .album-detail .img .img-box { box-shadow: none; width: 100%; height: 100%; }
  .middle-main.list-page .album-detail .img img { width: 3.7333rem; height: 3.7333rem; border-radius: 0.1333rem; box-shadow: none; }
  .middle-main.list-page .album-detail .detail-right { padding: 0; margin-top: -0.1rem; margin-left: 0.4rem; }
  .middle-main.list-page .album-detail .detail-right .detail-item { font-size: 0.32rem; display: block; line-height: 0.6133rem; }
  .middle-main.list-page .album-detail .detail-right .detail-item span { color: #7b87a6 !important; min-width: 1.6rem; }
  .middle-main.list-page .album-detail .detail-right .detail-item img { display: none; }
  .middle-main.list-page .main-title { height: 1.3333rem; line-height: 1.3333rem; padding-left: 0.4rem; font-size: 0.3733rem; color: #fff; border-bottom: 1px solid #383d5b; border-left-width: 0; margin-bottom: 0; background-color: #20243c; }
  .middle-main.list-page .main-title::before { display: none; }
  .middle-main.list-page .main-title.search-title { display: flex; align-items: center; justify-content: space-between; height: 0.9333rem; line-height: normal; font-weight: normal; padding-right: 0.4rem; }
  .middle-main.list-page .main-title.search-title:before { display: none; }
  .middle-main.list-page .main-title.search-title .search-title__end { color: #7b87a6; font-size: 0.3733rem; font-weight: normal; }
  .middle-main.list-page .main-title.search-title + .ul-list-header + ul { padding-top: 0.4rem; }
  .middle-main .burn-flow { margin-top: 0.4rem; padding: 0.5333rem 0.2rem; background: #20243c; overflow: hidden; }
  .middle-main .burn-flow .right { margin-left: 0; }
  .middle-main .burn-flow .right .item { padding-right: 0.8rem; margin-right: 0.1334rem; }
  .middle-main .burn-flow .right .item:not(:last-child)::after { width: 0.7867rem; height: 0.2133rem; top: 0; top: 10px; right: 0; background: url(../images/arrow-m.png) no-repeat 0 0; background-size: 0.7867rem 0.2133rem; }
  .middle-main .burn-flow .right .item div { width: 0.6667rem; height: 0.5467rem; }
  .middle-main .burn-flow .right .item p { font-size: 0.32rem; margin: 0.1333rem 0 0.1333rem; white-space: nowrap; }
  .middle-main .burn-flow .right .item span { font-size: 0.2933rem; color: #7b87a6; }
  .middle-main .burn.tab .tab-body { background-color: #20243c; margin-top: 0.2667rem; }
  .middle-main .burn.tab .mobile.list-header { padding: 0 0.4rem; height: 1.3333rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.3733rem; color: #7b87a6; border-bottom: 1px solid #383d5b; }
  .middle-main .burn.tab .mobile.list-header button { width: 1.6rem; height: 0.6667rem; color: #fff; background-color: #2e365a; border-radius: 0.0667rem; border: none; font-size: 0.3733rem; }
  .middle-main .burn.tab .ul-list-footer { padding: 0 0.4rem; height: 1.4667rem !important; display: flex; align-items: center; background-color: #222846; box-shadow: 0 -0.1333rem 0.1333rem 0 rgba(0, 0, 0, 0.5); z-index: 300; }
  .middle-main .burn.tab .ul-list-footer p { font-size: 0.32rem; color: #7b87a6; }
  .middle-main .burn.tab .ul-list-footer p span span.price { font-size: 0.48rem; }
  .middle-main .burn.tab .ul-list-footer .right button.error { max-width: 2.9333rem; width: 2.9333rem; height: 0.8rem; line-height: 0.8rem; font-size: 0.3733rem; border-radius: 0.0667rem; margin-left: 0; }
  .middle-main .burn.tab .order-instructions { color: #7b87a6; line-height: 0.6rem; padding: 0; }
  .middle-main .burn.tab .order-instructions .popup-body { overflow-y: scroll; height: 10rem; padding: 0.4rem; }
  .middle-main .burn.tab .order-instructions .title { font-size: 0.3733rem; height: 0.3733rem; line-height: 0.3733rem; border-left: 4px solid #db1d40; padding-left: 0.2667rem; margin-bottom: 0.2667rem; font-weight: normal; }
  .middle-main .burn.tab ul.cd-query { padding: 0 0.4rem; }
  .middle-main .burn.tab ul.cd-query li { border-bottom: 1px solid #383d5b; display: block; height: 3.8667rem !important; padding: 0.4rem 0 !important; line-height: 0.6667rem; }
  .middle-main .burn.tab ul.cd-query li div { font-size: 0.3733rem; height: auto; }
  .middle-main .burn.tab ul.cd-query li div:first-child { width: 100%; display: block; font-weight: bolder; }
  .middle-main .burn.tab ul.cd-query li div:nth-child(2), .middle-main .burn.tab ul.cd-query li div:nth-child(3) { display: flex; flex-direction: row; justify-content: flex-start; }
  .middle-main .burn.tab ul.cd-query li div:nth-child(2) span, .middle-main .burn.tab ul.cd-query li div:nth-child(3) span { color: #7b87a6; width: 1.6rem; }
  .middle-main .burn.tab ul.cd-query li div:nth-child(4) { float: right; display: flex; flex-direction: row; transform: translateY(-100%); }
  .middle-main .burn.tab ul.cd-query li div:nth-child(4) span { color: #7b87a6; }
  .middle-main .burn.tab ul.cd-query li div:nth-child(4) p { color: #db1d40; font-weight: bolder; }
  .middle-main .burn.tab ul.cd-query li div:nth-child(5) { flex: 1; width: 100%; display: flex; flex-direction: row; justify-content: flex-end; transform: translateY(-300%); }
  .middle-main .burn.tab ul.cd-query li div:last-child { width: 100%; justify-content: flex-end; transform: translateY(-200%); margin-top: 0.2667rem; }
  .middle-main .burn.tab ul.cd-query li div:last-child .btn { text-align: center; width: 1.6rem; height: 0.6667rem; line-height: 0.6667rem; background-color: #2e365a; color: #fff; font-size: 0.32rem; border-radius: 0.0667rem; }
  .middle-main .burn.tab ul.cd-query li div:last-child .btn + .btn { margin-left: 0.2667rem; }
  .unpaid-orders .unpaid-nums { position: absolute; top: 0; left: 0; right: 0; height: 1.3333rem; background-color: #2d3454; font-size: 0.3733rem; color: #fd8645; display: flex; align-items: center; padding-left: 0.4rem; }
  .unpaid-orders .unpaid-nums .arrow { position: absolute; right: 0.4rem; top: 50%; margin-top: -0.1867rem; }
  .middle-main.list-page ul.burn-list li { display: block; position: relative; height: auto !important; line-height: 1.0667rem !important; }
  .middle-main.list-page ul.burn-list li span:nth-child(1) { display: none; }
  .middle-main.list-page ul.burn-list li span:nth-child(2) { width: 100% !important; }
  .middle-main.list-page ul.burn-list li span.name { display: block !important; width: calc(100% - 0.58rem); }
  .middle-main.list-page ul.burn-list li span:nth-child(5).name { display: block !important; flex: none; }
  .middle-main.list-page ul.burn-list li span:last-child { position: absolute; bottom: 0; right: 0; height: auto; display: inline-block !important; }
  .middle-main.list-page ul.burn-list li span.udetail { width: 0.48rem !important; height: 0.48rem; bottom: 0.3rem; right: 0.4rem; }
  .middle-main.list-page ul.burn-list li + li.line { border-top: 1px solid #383d5b; padding-top: 0.4rem !important; }
  .create-order { border-top: 0.2667rem solid #171a2b; background-color: #20243c; }
  .create-order .unpaid-orders .unpaid-nums { position: static; background: none; color: #fff; }
  .create-order .unpaid-orders .unpaid-list { padding: 0.2667rem 0.4rem; background-color: #222846; color: #7b87a6; margin-left: 0.4rem; margin-right: 0.4rem; }
  .create-order .unpaid-orders .unpaid-list .block { display: block; margin-bottom: 0.2rem; }
  .create-order .unpaid-orders .unpaid-list p:last-child { margin-top: 0.2rem; }
  .create-order .unpaid-orders .unpaid-list .flex-between + div { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid #383d5b; }
  .create-order .unpaid-orders .unpaid-list .flex-between + div .block { display: block; }
  .create-order .unpaid-orders .pay-methods { padding: 0.4rem; }
  .create-order .unpaid-orders .pay-methods .layui-form-item { margin-bottom: 0; }
  .create-order .unpaid-orders .pay-methods .layui-form-item .hui-flex { flex-direction: column; }
  .create-order .unpaid-orders .address-list { position: relative; }
  .create-order .unpaid-orders .address-list > div > a { position: absolute; top: -0.9rem; right: 0.4rem; }
  .create-order .unpaid-orders .address-list ul { padding-top: 0; background-color: #222846; padding: 0.2667rem 0; margin-left: 0.4rem; margin-right: 0.4rem; }
  .create-order .unpaid-orders .address-list ul li { height: auto !important; padding: 0.24rem 0.3rem !important; }
  .create-order .unpaid-orders .address-list ul li .layui-form-radio { align-items: flex-start; line-height: 0.5rem; }
  .create-order .unpaid-orders .address-list ul li .layui-form-radio .layui-icon { margin-top: 0; }
  .create-order .unpaid-orders .addr-wrap.on { margin-top: 0.4rem; }
  .create-order .unpaid-orders .addr-wrap.on .hui-flex { display: flex; }
  .create-order .unpaid-orders .addr-wrap.on .select-item + .select-item { margin-left: 0.1333rem; }
  .create-order .unpaid-orders .addr-wrap.on .hui-input-black { height: 1.0667rem; color: #fff; border: 1px solid #212434; border-radius: 0.0667rem; background-color: #0b0d19; padding-left: 0.2rem; width: 100%; }
  .create-order .unpaid-orders .addr-wrap.on .hui-select { margin-bottom: 0; }
  .create-order .unpaid-orders .addr-wrap.on .hui-select .layui-unselect { color: #fffbfd; background-color: #111325; border: 0; border-radius: 5px; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item + .addr-item { margin-top: 0 !important; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item .item-right { padding: 0.2rem 0.2667rem; flex: 1; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item .item-right input { height: 1.0667rem; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item:nth-child(2) { margin-top: 0.4rem; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item:nth-child(2) .item-right .layui-form-item { margin-bottom: 0; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item:nth-child(2) .item-right .select-item + .select-item { margin-left: 0.1333rem; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item:last-child { margin-bottom: 0.4rem; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item:last-child .item-right { display: flex; flex-direction: row; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item:last-child button { flex: 1; height: 1.0667rem; display: flex; align-items: center; justify-content: center; border-radius: 0.1333rem; color: #fff; border: none; background: #db1d40; font-size: 0.4rem; }
  .create-order .unpaid-orders .addr-wrap.on .addr-item:last-child button + button { background-color: #2e365a; margin-left: 0.2667rem; }
  .mobile-nav-top { display: flex; justify-content: space-between; height: 1.52rem; line-height: 1.52rem; color: #fff; background-color: #20243c; }
  .mobile-nav-top .layui-icon { font-size: 0.48rem; margin-left: 0.4rem; }
  .mobile-nav-top .nav-title { font-size: 0.48rem; font-weight: 500; color: white; }
  .mobile-nav-top .nav-btn { font-size: 0.3733rem; font-weight: 500; color: white; margin-right: 0.5467rem; }
  .download-popup .popup-body { padding: 0.4rem 0.2667rem !important; position: relative; }
  .download-popup .popup-body .title { font-weight: normal; font-size: 0.4rem; color: #fff; line-height: 2; border-left-width: 0; padding-left: 0; margin-bottom: 0.2667rem; margin-left: 2.6667rem; height: 2.1333rem; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; }
  .download-popup .popup-body .title::before { width: 0; }
  .download-popup .popup-body .detail { margin-top: 1rem; display: flex; justify-content: space-between; line-height: 2; }
  .download-popup .popup-body .detail:after { content: ""; clear: both; display: table; }
  .download-popup .popup-body .detail .item { white-space: nowrap; }
  .download-popup .popup-body .detail img { position: absolute; top: 0.4rem; left: 0.2667rem; width: 2.1333rem; height: 2.1333rem; border-radius: 0.1333rem; }
  .download-popup .popup-body .detail .item { margin-left: 0; color: #7b87a6; }
  .download-popup .popup-body .detail .item span { margin-left: 0.1333rem; color: #fff; }
  .download-popup .popup-body .detail .item span.c-red { color: #db1d40; }
  .download-popup .popup-body .down-tips { margin-top: 0.4rem; margin-bottom: 0.4rem; padding: 0; background: none; display: flex; flex-direction: column; line-height: 1.5; }
  .download-popup .popup-body .down-tips .quality { color: #db1d40; font-size: 0.4rem; font-weight: bolder; }
  .download-popup .popup-body .down-tips .c-gray { color: #7b87a6; }
  .download-popup .popup-body .down-tips .c-gray p { display: inline; }
  .download-popup .popup-body .down-tips .btns { width: 100%; display: flex; align-items: center; justify-content: space-between; }
  .download-popup .popup-body .down-tips .btn { flex: 1; display: block; margin-top: 0.4rem; height: 1.2rem; background-image: linear-gradient(to right, #2aa146, #13d06c); color: #fff; font-size: 0.4rem; border-radius: 0.1333rem; display: flex; flex-direction: row; justify-content: center; border: none; }
  .download-popup .popup-body .down-tips .btn + .btn { display: flex; margin-left: 0.2667rem; background: #2e365a; }
  .download-popup .popup-body .down-tips .btn div { text-align: left; padding-left: 0.2667rem; display: flex; flex-direction: column; justify-content: center; line-height: normal; }
  .download-popup .popup-body .down-tips .btn div span { font-size: 0.3733rem; font-size: bold; }
  .download-popup .popup-body .down-tips .btn div p { font-size: 0.32rem; }
  .download-popup .mark { z-index: 10; }
  .login-popup { bottom: 0; left: 0.2667rem !important; right: 0.2667rem !important; display: none !important; background: none; height: auto; }
  .login-popup.on { display: flex !important; }
  .login-popup .popup-body { padding: 0.6667rem 0.4rem 0.5333rem !important; }
  .login-popup .popup-body .form-item { height: 1.0667rem; background: #171a2b; display: flex; align-items: center; margin-bottom: 0.2667rem; padding: 0 0.2667rem; border-radius: 0.1333rem; }
  .login-popup .popup-body .form-item i { margin-right: 0.2667rem; }
  .login-popup .popup-body .form-item input { flex: 1; background: none; border: none; color: #fff; }
  .login-popup .popup-body .form-item input::placeholder { color: #7b87a6; }
  .login-popup .popup-body .form-item .input-suffix { color: #017efd; }
  .login-popup .popup-body .form-item .input-suffix-img { margin-right: -0.2667rem; padding-left: 0.2667rem; background-color: #20243d; border-radius: 0 0.1333rem 0.1333rem 0; height: 1.0667rem; display: flex; align-items: center; }
  .login-popup .popup-body .form-item .input-suffix-img img { max-width: 2rem; height: 1.0667rem; }
  .login-popup .popup-body .form-item-btn .btn { width: 100%; display: block; height: 1.1733rem; line-height: 1.1733rem; font-size: 0.4rem; color: #fff; background-color: #db1d40; border-radius: 0.1333rem; }
  .login-popup .popup-body .other-login { margin-top: 0.5333rem; }
  .login-popup .popup-body .other-login .line { width: 100%; height: 1px; background-color: #383d5b; position: relative; }
  .login-popup .popup-body .other-login .line:before { content: "其他登录方式"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 0.2667rem; background-color: #20243d; color: #7b87a6; font-size: 0.32rem; }
  .login-popup .popup-body .other-login .btns { display: flex; justify-content: space-between; margin-top: 0.6rem; }
  .login-popup .popup-body .other-login .btns .layui-btn { flex: 1; height: 1.1733rem; line-height: 1.1733rem; display: flex; align-items: center; justify-content: center; background-color: #222846; border-radius: 0.1333rem; color: #7b87a6; font-size: 0.3733rem; }
  .login-popup .popup-body .other-login .btns .layui-btn i { margin-right: 0.1333rem; }
  .login-popup .popup-body .other-login .btns .layui-btn + .layui-btn { margin-left: 0.2667rem; }
  .login-popup .popup-body .other-login p { margin-top: 0.4rem; font-size: 0.3733rem; text-align: center; color: #7b87a6; }
  .login-popup .popup-body .other-login p a { color: #017efd; }
  .middle-main .burn.tab ul li > span:nth-child(2) { padding-left: 0; }
  .middle-main .burn.tab ul li > span:nth-child(2) a { max-width: calc(100% - 0.4rem); }
  .middle-main .burn.tab ul li > span:last-child { width: 1rem; } }

@media screen and (min-width: 751px) { #playList li .icon-img.stop { margin-top: -6px; background: url("../images/stop.gif") no-repeat 0 0; }
  #playList li .icon-img.stop.on { background: url("../images/play.gif") no-repeat 0 0; }
  #media [class^="controlbgbar"] { width: 100%; height: 38px; position: absolute; bottom: 0px; opacity: 0.8; z-index: 990; }
  #media [class^="controlbar"] { width: 100%; height: 38px; position: absolute; bottom: 0px; z-index: 990; display: flex !important; flex-direction: column; justify-content: center; bottom: auto !important; top: 10px; }
  #media [class^="controlbar"] [class^="timetext"] { display: block !important; }
  #media [class^="controlbar"] .control { width: 100%; display: flex; align-items: center; justify-content: space-between; }
  #media [class^="controlbar"] .is-loop { position: absolute; top: 48px; left: 5px; cursor: pointer; }
  #media [class^="timeprogressbg"], #media [class^="timebobg"] { bottom: auto !important; top: 5px; }
  #media [class^="timetext"] { position: absolute; top: 10px; padding-left: 0 !important; height: 30px; width: 100%; }
  #media [class^="timetext"] .start-time { position: absolute; left: 0; }
  #media [class^="timetext"] .end-time { position: absolute; right: 0; }
  #media [class^="play"], #media [class^="pause"] { width: 38px; height: 38px; float: left; overflow: hidden; cursor: pointer; display: block; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); }
  #media [class^="play"] *, #media [class^="pause"] * { display: none; }
  #media [class^="front"] { display: block !important; position: absolute; top: 40px; left: 50%; margin-left: -90px; width: 21px !important; height: 29px !important; }
  #media [class^="front"] * { display: none; }
  #media [class^="next"] { display: block !important; position: absolute; top: 40px; left: 50%; margin-left: 70px; width: 21px !important; height: 29px !important; }
  #media [class^="next"] * { display: none; }
  #media [class^="mute"] { position: absolute; right: 110px; top: 48px; height: 14px !important; width: 17px !important; }
  #media [class^="mute"] * { display: none; }
  #media [class^="escmute"] { position: absolute; right: 110px; top: 48px; height: 14px !important; width: 17px !important; }
  #media [class^="escmute"] * { display: none; }
  #media [class^="volume"] { position: absolute; overflow: visible !important; display: block !important; right: 0; top: 38px; }
  #media [class^="volume"] [class^="volumedbg"] { top: 0; width: 100px !important; }
  #media [class^="volume"] [class^="volumebg"] { width: 100% !important; }
  #media [class^="volume"] [class^="volumeup"] { left: 0; top: 0; }
  #media [class^="volume"] [class^="volumebo"] { width: 12px; height: 12px; overflow: hidden; border-radius: 50%; position: absolute; background-color: white; top: 11px; left: 88px; cursor: pointer; }
  #media [class^="volume"] [class^="volumebw"] { width: 6px; height: 6px; overflow: hidden; border-radius: 50%; position: absolute; background-color: #db1d40; left: 3px; top: 3px; } }

@media screen and (max-width: 750px) { .songs-list.popup ul.playmusic-list li > a { line-height: 1.0667rem !important; height: 100%; max-width: 100% !important; }
  .songs-list.popup ul.playmusic-list li > span:last-child { display: flex !important; justify-content: flex-end; }
  .songs-list.popup ul.playmusic-list li > span:last-child .download { margin-right: 0; }
  #playList li .icon-img.stop { margin-top: -0.08rem; background: url("../images/stop.gif") no-repeat 0 0; }
  #playList li .icon-img.stop.on { background: url("../images/play.gif") no-repeat 0 0; }
  [class^="menuc"] { display: none !important; }
  #media { flex: 1; margin-top: 0.8rem; height: 3.2rem !important; }
  #media [class^="controlbgbar"] { display: none !important; }
  #media canvas { display: none !important; }
  #media [class^="controlbar"] { display: flex !important; flex-direction: column; justify-content: center; bottom: auto !important; top: 0.3467rem; height: auto !important; }
  #media [class^="controlbar"] [class^="timetext"] { display: block !important; }
  #media [class^="controlbar"] .control { width: 100%; display: flex; align-items: center; justify-content: space-between; }
  #media [class^="timeprogressbg"] { background: #1c1f31 !important; }
  #media [class^="timeprogressbg"], #media [class^="timebobg"] { bottom: auto !important; top: 0.1333rem; height: 0.16rem !important; }
  #media [class^="timeprogressbg"] [class^="loadprogress"], #media [class^="timebobg"] [class^="loadprogress"] { background: none !important; }
  #media [class^="timebobg"] [class^="timebo"] { top: -0.12rem !important; display: inline-block; background-color: transparent !important; background: url(../images/sprite.png) no-repeat 0 0; background-position: -0.1064rem -13.90667rem; background-size: 5.33333rem; width: 0.44rem !important; height: 0.56rem !important; box-shadow: none !important; top: -0.18rem !important; }
  #media [class^="timebobg"] [class^="timebo"] > * { display: none !important; }
  #media [class^="timebobg"] [class^="timebo"] [class^="timebw"] { width: 0.16rem !important; height: 0.16rem !important; top: 50% !important; left: 50% !important; margin-top: -0.08rem; margin-left: -0.08rem; }
  #media [class^="timetext"] { position: absolute; top: 0px; padding-left: 0 !important; height: 0.8rem; line-height: 0.8rem; width: 100%; }
  #media [class^="timetext"] .start-time { position: absolute; top: 0; left: 0; line-height: 0.8rem; }
  #media [class^="timetext"] .end-time { position: absolute; right: 0; top: 0; line-height: 0.8rem; }
  #media .is-loop { position: absolute; top: 1.1707rem; left: 0; }
  #media [class^="play"], #media [class^="pause"] { position: absolute; top: 0.7rem; left: 50%; margin-left: calc(-1.6533rem / 2); }
  #media [class^="play"] *, #media [class^="pause"] * { display: none !important; }
  #media [class^="front"] { display: block !important; position: absolute; top: 1.1rem; left: 50%; margin-left: calc(-0.68rem / 2 - 2.1rem); width: 0.68rem !important; height: 0.73rem !important; }
  #media [class^="front"] * { display: none !important; }
  #media [class^="next"] { display: block !important; position: absolute; top: 1.1rem; left: 50%; margin-left: calc(-0.68rem / 2 + 2.1rem); width: 0.68rem !important; height: 0.73rem !important; }
  #media [class^="next"] * { display: none !important; }
  #media [class^="mute"] { position: absolute; right: 0.3rem; top: -1.8rem; width: 0.6933rem !important; height: 0.6133rem !important; }
  #media [class^="mute"] * { display: none !important; }
  #media [class^="escmute"] { position: absolute; right: 0.3rem; top: -1.8rem; width: 0.6933rem !important; height: 0.6133rem !important; }
  #media [class^="escmute"] * { display: none !important; }
  #media [class^="volume"] { position: absolute; overflow: visible !important; display: block !important; display: none !important; right: 0; top: 38px; }
  #media [class^="volume"] [class^="volumedbg"] { top: 0; width: 100px !important; }
  #media [class^="volume"] [class^="volumebg"] { width: 100% !important; }
  #media [class^="volume"] [class^="volumeup"] { left: 0; top: 0; }
  .jp-audio.jp-state-playing .jp-type-single .jp-gui .time .jp-progress .ui-slider-handle { top: -0.17rem; border: none; display: inline-block; background: url(../images/sprite.png) no-repeat 0 0; background-position: -0.10667rem -13.90667rem; background-size: 5.33333rem; width: 0.4rem; height: 0.56rem; }
  .jp-audio.jp-state-playing .jp-type-single .jp-gui .jp-controls { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
  .jp-audio.jp-state-playing .jp-type-single .jp-gui .jp-controls .play-toggles .jp-play { background: url(../images/sprite.png) no-repeat 0 0; background-position: -3.6rem -5.09333rem; background-size: 5.33333rem; width: 1.6533rem; height: 1.6533rem; }
  .jp-audio.jp-state-playing .jp-type-single .jp-gui .jp-controls .play-toggles .jp-stop { display: inline-block; }
  .jp-audio.jp-state-muted .jp-type-single .jp-gui .jp-volume-controls .jp-mute { display: inline-block; background: url(../images/sprite.png) no-repeat 0 0; background-position: -3.89333rem -3.82667rem; background-size: 5.33333rem; width: 0.6933rem; height: 0.6133rem; }
  .jp-audio.jp-state-looped .jp-type-single .jp-gui .jp-controls-holder .jp-controls .jp-toggles .jp-repeat { background-size: 5.33333rem; width: 0.6933rem; height: 0.6667rem; }
  .jp-audio .jp-type-single { flex: 1; width: 100%; }
  .jp-audio .jp-type-single .jp-gui { display: flex; flex-direction: column; position: relative; }
  .jp-audio .jp-type-single .jp-gui .jp-volume-controls { position: absolute; top: 0.1rem; right: 0; }
  .jp-audio .jp-type-single .jp-gui .time { height: 0.32rem; margin-top: 0.4rem; margin-bottom: 0.4rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; color: #fff; font-size: 0.3467rem; }
  .jp-audio .jp-type-single .jp-gui .time .jp-progress { flex: 1; height: 0.16rem; border-radius: 0.08rem; margin: 0 0.2667rem; border-width: 0; background: #1c1f31; }
  .jp-audio .jp-type-single .jp-gui .time .jp-progress .jp-seek-bar { height: 100%; position: relative; }
  .jp-audio .jp-type-single .jp-gui .time .jp-progress .jp-seek-bar .timebobg { position: absolute; left: 0; top: 0; margin-top: calc((0.16rem - 0.5rem) / 2); margin-left: calc((0.16rem - 0.56rem) / 2); }
  .jp-audio .jp-type-single .jp-gui .time .jp-progress .jp-play-bar { width: 0; height: 100%; border-radius: 0.08rem; background-image: linear-gradient(to right, #15d7c4, #b8fe58); }
  .jp-audio .jp-type-single .jp-gui .time .jp-progress .ui-slider-handle { top: -0.17rem; border: none; display: inline-block; background: url(../images/sprite.png) no-repeat 0 0; background-position: -0.10667rem -13.90667rem; background-size: 5.33333rem; width: 0.4rem; height: 0.56rem; }
  .jp-audio .jp-type-single .jp-gui .jp-controls { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
  .jp-audio .jp-type-single .jp-gui .jp-controls .play-toggles { display: flex; align-items: center; justify-content: space-between; width: 4.8rem; }
  .main-middle .main-list .right.rank-wrap { border-top: 0.2133rem solid #171a2b; margin-left: 0; width: 100%; background: none; }
  .main-middle .main-list .right.rank-wrap .main-header { justify-content: flex-end; }
  .main-middle .main-list .right.rank-wrap .main-header .title { padding-left: 0; }
  .main-middle .main-list .right.rank-wrap .main-header .title:after { display: none; }
  .main-middle .main-list .right.rank-wrap .main-header .title > div:first-child { font-size: 0.3733rem; }
  .main-middle .main-list .right.rank-wrap .main-header .title > div:nth-child(2) { display: flex; flex-direction: row; align-items: flex-end; font-size: 0; }
  .main-middle .main-list .right.rank-wrap .main-header .title > div:nth-child(2) a { background: none; padding: 0; height: 1.0667rem; line-height: 1.0667rem; color: #7b87a6; font-size: 0.3733rem; font-weight: normal; background: none; position: relative; font-weight: bolder; color: #7b87a6; font-size: 0.3733rem; font-weight: normal; }
  .main-middle .main-list .right.rank-wrap .main-header .title > div:nth-child(2) a + a { margin-left: 0.2667rem; }
  .main-middle .main-list .right.rank-wrap .main-header .title > div:nth-child(2) a.active { color: #fff; }
  .main-middle .main-list .right.rank-wrap .main-header .title > div:nth-child(2) a.active:after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 0.0533rem; background-color: #db1d40; border-radius: 0.0267rem; }
  .main-middle .main-list .right.rank-wrap .tab-body .main-body { position: relative; }
  .main-middle .main-list .right.rank-wrap .tab-body .main-body .tab-header { position: absolute; right: 0.2667rem; top: -0.85rem; display: flex; flex-direction: row; height: 0.6133rem; align-items: center; color: #fff; border-radius: 0.3067rem; background: #171a2b; }
  .main-middle .main-list .right.rank-wrap .tab-body .main-body .tab-header a { padding: 0 0.2133rem; flex: 1; height: 100%; }
  .main-middle .main-list .right.rank-wrap .tab-body .main-body .tab-header a.active { background: #2e365a; border-radius: 0.3067rem; color: #fff; }
  .main-middle .main-list .right.rank-wrap .tab-body .main-body .tab-body ul.tab-body__item { padding: 0.4rem; }
  .main-middle .main-list .right.rank-wrap .tab-body .main-body .tab-body ul.tab-body__item li { color: #ffffff; }
  .main-middle .main-list .right.rank-wrap .tab-body .main-body .tab-body ul.tab-body__item li:nth-child(n + 7) { display: none; }
  .num { background: url(../images/m-nums.png) no-repeat center; background-size: 0.5067rem 12.44rem; display: inline-block; width: 0.5067rem; height: 0.4133rem; margin-top: 0 !important; vertical-align: middle; }
  .num__1 { background-position: 0 0; }
  .num__2 { background-position: 0 -1.32rem; }
  .num__3 { background-position: 0 -2.6667rem; }
  .num__4 { background-position: 0 -4rem; }
  .num__5 { background-position: 0 -5.3467rem; }
  .num__6 { background-position: 0 -6.68rem; }
  .num__7 { background-position: 0 -8.0267rem; }
  .num__8 { background-position: 0 -9.36rem; }
  .num__9 { background-position: 0 -10.7067rem; }
  .num__10 { background-position: 0 -12.04rem; }
  .search-condition { border-top: 0.2667rem solid #171a2b; background: #20243c; padding: 0.4rem 0.4rem 0; line-height: 3; color: #7b87a6; }
  .search-condition .search-left { width: auto; display: inline-block; background: #171a2b; color: #fff; height: 0.6667rem; line-height: 0.6667rem; border-radius: 0.3333rem; }
  .search-condition .search-left span { display: none; }
  .search-condition .search-left a { display: inline-block; height: 100%; align-items: center; padding: 0 0.4rem; }
  .search-condition .search-left a.active { background: #2e365a; border-radius: 0.3333rem; }
  .search-sort { background: #20243c; border-bottom: 1px solid #383d5b; height: 0.9333rem; display: flex; flex-direction: row; align-items: center; padding: 0 0.4rem; font-size: 0.4267rem; }
  .search-sort a { display: inline-block; height: 100%; color: #7b87a6; margin-right: 0.2667rem; line-height: 2; }
  .search-sort a.active { color: #fff; border-bottom: 0.0533rem solid #db1d40; } }

@media screen and (max-height: 634px) and (max-width: 750px) { .middle-main .player-box .player-left { padding-top: 2.5rem; }
  .middle-main .player-box .player-left .music-player { width: 6rem; height: 6rem; }
  .middle-main .player-box .player-left .music-player > img { width: 6rem; height: 6rem; margin-top: -3rem; }
  .middle-main .player-box .player-left .music-player__pointer { width: 2.0933rem; height: 5.1333rem; background: url(../images/player-line-m.png) no-repeat 0 0; background-size: 2.0933rem 5.1333rem; }
  .middle-main .player-box .player-right { height: 3.8rem; } }